React路由

1、React路由介绍

1.1、单页面应用

单页面得特点：只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面

优点：加载速度快，用户体验比较好

缺点：

第一次加载比传统要慢一点
不利seo
页面相对复杂
返回键

1.2、安装react-router-dom

在项目命令行中，执行

cnpm install react-router-dom -S

下载到生产环境的依赖中。

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：

HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
Link表示一个路由的链接，属性to

import {HashRouter,Route,Link} from 'react-router-dom'

代码示例：

render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <Link to="/home">首页</Link>&nbsp;&nbsp;
                    <Link to="/movie/">电影</Link>&nbsp;&nbsp;
                    <Link to="/about">关于</Link>
                    <hr />
                    <Route path="/home" component={Home} ></Route><hr/>
                    <Route path="/movie" component={Movie} exact></Route><hr/>
                    <Route path="/about" component={About}></Route><hr/>
                </div>
            </HashRouter>
        );
    }

当使用HashRouter把APP根组件的元素包裹起来之后，网站就已经启用路由了，在一个HashRouter中，只能有唯一的一个根元素。在一个网站中，只需要使用唯一的一次<HashRouter></HashRouter>就行了。

Route创建的标签，就是路由规则，其中path表示要匹配的路由，component表示要展示的组件。Route具有两种身份：1.它是一个路由匹配规则；2.它是一个占位符，表示将来匹配到的组件都放到这个位置

需要注意的地方

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

2、路由传值

2.1、React-router-dom路由传值

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

Route path路径后面 /:id （key）
Link to 路径后面 /top/10 （value）

接收传值：
class类组件，this.props.match.params.属性名
函数组件：形参.match.params.属性名

代码示例：

render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <Link to="/movie/top/10">电影</Link>&nbsp;&nbsp;
                    <hr />
                    <Route path="/movie/:type/:id" component={Movie} exact></Route>
                </div>
            </HashRouter>
        );
    }

在Route内置组件中，配置path地址：

<Route path="/movie/:type/:id" component={Movie} exact></Route>

在Link内置组件中，配置to属性，进行跳转：

<Link to="/movie/top/10">电影</Link>

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

render(){
        console.log(this);
        return (
            <div>
                电影--{this.props.match.params.type}--{this.props.match.params.id}
            </div>
        );
    }

代码优化后：

class Movie extends React.Component{

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

    render(){
        console.log(this);
        return (
            <div>
                电影--{this.state.routeParams.type}--{this.state.routeParams.id}
            </div>
        );
    }
}

函数组件中通过形参接收传递过来的值，props形参，函数组件作为路由组件，props就是传递过来的对象，里面携带着路由传递过来的数据

import React from 'react'

export default function home(props) {
    return (
        <div>
            {props.match.params.id}
        </div>
    )
}

2.2、嵌套路由

嵌套路由：在路由组件中，使用Link， Route，配置子路由，实现跳转，切换；

下面为一级路由，在一级路由Home为路由组件

<Route path="/home" component={ Home }></Route>

在Home组件中继续使用Link，Route进行路由的嵌套，需要注意的就是路由地址，前部分为一级路由地址，后面接一个二级路由相应的路径

render() {
    return (
        <div>
            <ul>
                <li><Link to="/home/a">推荐</Link></li>
                <li><Link to="/home/b">新时代</Link></li>
                <li><Link to="/home/c">动漫</Link></li>
            </ul>
            <Route path="/home/a" component={ A }></Route>
            <Route path="/home/b" component={ B }></Route>
            <Route path="/home/c" component={ C }></Route>
        </div>
    )
}

2.3、JS实现路由跳转

引入BrowserRouter模块

import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'

使用BrowserRouter作为根容器

//跳转点击事件
jump(){
    window.location.href = "/news"
}

render(){
    return (
        <BrowserRouter>
            <div>
                <h1>这是网站的根目录</h1>
                <hr />
                <button onClick={()=>{this.jump()}}>新闻</button>
                <hr />
                <Route path="/news" component={News}></Route>
            </div>
        </BrowserRouter>
    );
}

在render方法中，写一个按钮，按钮名称为js跳转路由，定义一个onClick方法，箭头函数解决this指向问题，与render同级，定义一个jump方法，在jump方法中执行一句代码进行路由跳转，使用window.location.href = “路由的地址”实现路由跳转。

3、react-router-dom内置组件

首先按需引入，使用什么内置组件，就需要引入

import { BrowserRouter, Link, Route,Redirect,NavLink,Switch } from 'react-router-dom'

3.1、在组件中使用NavLink

NavLink 带有选中activeClassName ,如果路由处于激活状态，显示激活class样式。

在我们之前案例的基础上，找到Link组件，我们已经学到Link组件的作用，可以进行路由的跳转，通过to属性，跳转相应的path地址。

<ul>
    <li>
        <Link to="/home">首页</Link>
    </li>
    <li>
        <Link to="/video">好看视频</Link>
    </li>
</ul>

将组件中的Link全部换成NavLink组件

<li>
    <NavLink activeClassName="red" to="/home">首页</NavLink>
</li>
<li>
    <NavLink activeClassName="red" to="/video">好看视频</NavLink>
</li>

我们会发现，之前可以正常进行路由跳转，换成NavLink，还依然可以正常跳转，证明组件得跳转使用NavLink也可以实现，那么问题来了，NavLink有什么用，为什么封装了NavLink，将每一个NavLink加入一个activeClassName属性绑定一个class类样式，这时在触发NavLink时，会触发相应得样式，这样有一个切换效果。

3.2、在组件中使用Redirect内置组件

Redirect 重定向具备to属性，可以直接跳转到指定路由。

在render方法中，使用内置组件，Redirect内置组件使用to属性，当执行到内置标签时，会进行to跳转路由，to后面接的地址是什么，就可以匹配到相应得路由组件。

<Redirect to="/home/c"></Redirect>

3.3、在组件使用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>