关于react路由的介绍

关于react路由的介绍

《【风萧萧兮易水寒，壮士一去兮不复还】》
不知不觉想起了这句诗，今天圣诞节，祝大家圣诞节快乐！
来看正文：

安装react-router-dom

要是用react路由就必须要安装react-router-dom
在项目命令行中，执行

cnpm install react-router-dom -S

路由内置组件

路由内置组件包括
HashRouter （hash方式锚点路由地址栏以#号形式跳转 也叫前端路由）
BrowserRouter（浏览器路由器 也叫后端路由）
Route （配置路由）
Link ：（普通的路由跳转）

格式：
1.HashRouter 路由书写格式

 <HashRouter>
   <Link to="/a"></Link> //跳转到a页面
   <Route  path="/a" component={A}/>//引入A组件，进行跳转
</Hashrouter>

2.BrowserRouter路由书写格式

 <BrowserRouter>
   <Link to="/a"></Link> //跳转到a页面
   <Route  path="/a" component={A}/>//引入A组件，进行跳转
</BrowserRouter>

HashRouter和BrowserRouter的区别

BrowserRouter:浏览器路由器 （即为后端路由，可以连接后端数据）
HashRouter: hash方式锚点路由地址栏以#号形式跳转 （即为前端路由，只在前端能够使用）

嵌套路由

嵌套路由就是 ：【Route配置好一个路由之后，在组件中又配置一个Route，为二级嵌套路由,（可以写嵌套多个）】

 <HashRouter>
   <Link to="/a"></Link> //跳转到a页面
   <Route  path="/a" component={A} />
   <Rpute path="/b" component={b} /> 
</Hashrouter>

需要注意的地方

• Route 组件path地址是以/开头 ，配置component属性，是显示的组件，这个属性不可以大写
• Route组件可以单双标签使用，单标签需要/结尾，双标签不可以在中间写入别的东西
• Link to属性的地址也是/开头，Link在页面渲染的是a标签

带参数路由和获取参数

通过配置路由的地址，在Link跳转时

• Route path路径后面 /:id （key）

• Link to 路径后面 /top/12.html （value）

  接收传值：

• class类组件，this.props.match.params.属性名

• 函数组件：形参.match.params.属性名
  示例
  【父组件代码】

import React from 'react'
//引入首页页面
import Home from './component/Home'
//引入新闻页面
import News from './component/News'
//引入关于页面
import About from './component/About'
//引入路由
import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'

 class App extends React.Component{

    render(){
       
        return (
                // 根容器
                <HashRouter>
                <div>
                    <h1>这是根目录</h1>
                    <hr/>
                    {/* 链接 */}
                   <Link to="/home">首页</Link>&nbsp;&nbsp;
                   <Link to="/news/top/12.html">新闻</Link>&nbsp;&nbsp;
                   <Link to="/about">关于我们</Link>
                    <hr/>
                    {/* 路由规则，Route是配置路由的规则，同时也是一个占位符 */}
                    <Route path="/home" component={Home} /> 
                    <hr/>
                    <Route path="/news/:type/:id" exact component={News}></Route>
                    <hr/>
                    <Route path="/about" component={About}></Route>

                </div>
                </HashRouter>
        );
    }
}

export default App;

【Home页面代码】

import React from 'react';

class Home extends React.Component{
  render(){
      return (
          <div>首页</div>
      );
  }
}

export default Home;

【News页面】
（类组件中通过生命周期进行接收，this.props携带路由传递过来的数据：）

import React from 'react';

class News extends React.Component{

    constructor(props){
        super();
        this.state = {
            p: props.match.params
        }
    }

    render(){
        // console.log(this);
        return (
            <div>
            //两种方法：
                 {/* 新闻--{this.props.match.params.type}--{this.props.match.params.id} */}
                 新闻--{this.state.p.type}--{this.state.p.id}
            </div>
        );
    }
}

export default News;

【About页面代码】

import React from 'react';

class About extends React.Component{
    render(){
        return (
            <div>关于我们</div>
        );
    }
}

export default About;

上述案例中我们在App.js组件里面给News.js组件引入参数在News.js中接收实现的效果。

扩展

在组件使用Switch内置组件

Switch 具有排他性

在组件中使用Switch标签包裹所有得Route，这时，Route相当于每一个path都是精准的匹配，展示相应的组件，最后一个Route是一个不具备地址的路由路径，如果当Link指向一个不存在的地址时，没有精准的匹配到地址，那么会显示到C404路由，使用Switch只会显示一个组件，匹配到为止。

<Switch>
    <Route path="/home" component={ Home }></Route>
    <Route path="/video" component={ Home1 }></Route>
    <Route path="/book" component={ Home2 }></Route>
    <Route path="/renwu" component={ Home3 }></Route>
    <Route path="/user" component={ Home4 }></Route>
    <Route component={ C404 }></Route>
</Switch>

这是本阶段的最后一篇博客了，要学习的东西还很多，所以对自己也对大家说声加油，共同努力！！！