React路由简单介绍
1.1、基本用法
单页面得特点：只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面
优点：加载速度快，用户体验比较好
缺点：
- 第一次加载比传统要慢一点
- 不利seo
- 页面相对复杂
- 返回键
1.2安装react-router-dom
cnpm install react-router-dom
下载到生产环境的依赖中。
在组件中通过对象的解构方式去获取到`react-router-dom`内置组件，在组件中，按需引入内置组件，在页面中进行使用：
- HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
- Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
- Link表示一个路由的链接
代码示例
render(){
return (
<HashRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
<Link to="/home">首页</Link>
<Link to="/movie/">电影</Link>
<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.1、路由传值
通过配置路由的地址，在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>
<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地址。
```html//
<ul>
<li>
<Link to="/home">首页</Link>
</li>
<li>
<Link to="/video">好看视频</Link>
</li>
</ul>
将组件中的Link全部换成NavLink组件
``html// <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后面接的地址是什么，就可以匹配到相应得路由组件。
```html// <Redirect to="/home/c"></Redirect>
3.3、在组件使用Switch内置组件
Switch 具有排他性
在组件中使用Switch标签包裹所有得Route，这时，Route相当于每一个path都是精准的匹配，展示相应的组件，最后一个Route是一个不具备地址的路由路径，如果当Link指向一个不存在的地址时，没有精准的匹配到地址，那么会显示到C404路由，使用Switch只会显示一个组件，匹配到为止。
``html//
<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>
```
