React学习笔记(五)：路由
React学习笔记(五)：路由
这篇文章并不是一下子告诉你怎么做，而是一个学习过程，会不停的改造路由。
安装
cnpm i react-router-dom -S
导入
具体是看你用到哪个标签就导入哪个，比如
import { BrowserRouter as Router, Route, Link, Redirect, Switch, NavLink } from "react-router-dom"
编写路由匹配规则
如下图所示，这是在根组件写的路由匹配规则。
1、Route标签必须写在Router标签里。
2、如果路由匹配规则使用了重定向，则用Switch标签包裹。
3、path为匹配路径，这是模糊匹配（包含该规则的路径就行），component是要展示的组件。
4、Redirect是重定向标签，from是匹配路径，to是跳转到的路径。
5、重定向必须写在目标路由后面，比如你重定向到home组件，那你就要写在home组件匹配规则后面。
6、路由规则是按顺序执行的。
7、exact是严格匹配的意思，常用与根路径 ’ / ’ 匹配，因为所有匹配规则都含有 ’ / ’ ，而且是模糊匹配 ，不加exact就会被影响到。
8、404路由写在最后面，当上面都无法匹配时，匹配该路由，那是因为没有设置path属性。
如果没写404组件，可以写首页组件，也就是用户乱写地址，跳转到首页。
如果只想维持住原页面，不作跳转的话，那就不写404路由，毕竟没有找到符合的匹配规则，页面自然也就不会跳转。
上面的路由规则写的有点复杂是为了url的层次结构的严谨性。
当用户进入网站时首先匹配到的是根路径 ‘ / ’，为了一进来要看到内容，所以展示home组件。
但作为强迫症的我来说，必须是 ‘ /home ’ 路径才行，所以用了重定向。
路由的切换
这是路由提供的Link标签，你也可以使用a标签。
NavLink标签可以给当前选中的路由a标签添加样式。
登录拦截（路由守卫、导航守卫）
1、在需要登录拦截的页面的state，定义一个登录flag。
2、在render函数中添加判断，判断位置写在return上面就行。判断是否有登录，如果没有登录，就跳转时登录页面。
至于这个登录flag怎么修改就看你们网站怎么写了。
下面介绍带参跳转的三种办法：get传值、动态路由传值、编程式导航。
get传值
1、在跳转标签里的跳转路径属性中，设置要传的参数。
在路径后面添加问号，然后就可以传参，多个参数之间使用&连接。
如图所示，传了第一个参数是变量aid，所以使用了es6的字符串模板语法，然后传了第二个参数是aaa=123。
2、接收参数的组件需要安装url模块来解析地址，cnpm i url -S。
3、导入url模块，import url from ‘url’
4、使用url模块解析地址
解析出来的query是个对象，里面包含传递过来的参数aid和aaa，可以比如query.aid来使用参数。
这段代码一般常常写在componentDidMount这个生命周期函数中。
动态路由传值
1、在跳转标签里的跳转路径属性中，设置要传的参数。
在路径后面添加斜杠，然后就可以传参，多个参数之间使用 / 连接。
如图所示，传了第一个参数是变量aid，所以使用了es6的字符串模板语法，然后传了第二个参数是123。
2、接收参数的组件如下图写。
params是个对象，里面包含传递过来的参数aid和aaa，可以比如params.aid来使用参数。
这段代码一般常常写在componentDidMount这个生命周期函数中。
3、修改路由匹配规则。
如图所示的写法，分别接收参数aid和aaa。
编程式导航、withRouter
不是通过点击标签来跳转，而是通过JS来跳转，就叫编程式导航，不需要写路由匹配规则。
1、导入withRouter，import { withRouter } from “react-router-dom”
2、改变暴露组件的写法。
使用withRouter暴露的组件，可以获得路由信息，就可以使用编程式导航。
3、准备要跳转的DOM，并绑定跳转函数。
4、编写跳转函数。
如图所示，第一个是返回上一页的函数，并不是上一层。
第二个是不带参的跳转页面函数。
第三个是带多个参数的跳转页面函数。建议在路径属性后面添加参数，要是在路径里传递参数，接收参数的组件还要使用url模块来解析，很麻烦。
5、接收参数的组件如下图写。
params是个对象，里面包含传递过来的参数aaa和bbb，可以比如location.aaa来使用参数。
这段代码一般常常写在componentDidMount这个生命周期函数中。
剥离路由
随便项目的编写，路由会越来越庞大，需要剥离路由方便管理。
1、在class外部自定义一个路由数组，匹配规则以对象形式写在路由数组中。
let routes = [ {
path: "/",
redirect: "/home",
exact: true
},
{
path: "/home",
component: Home,
name: '首页'
},
{
path: "/news",
component: News,
name: '新闻'
},
{
path: "/product",
component: Product,
name: '商品'
},
{
path: "/newdetail/:aid/:aaa",
component: NewDetail
},
{
path: "/productdetail",
component: ProductDetail
},
{
path: "/user",
component: User,
name: '用户',
routes:[
{
path: "/user",
redirect: "/user/info",
exact: true
},
{
path: "/user/info",
component: Info,
name: '用户信息'
},
{
path: "/user/center",
component: Center,
name: '个人中心'
}
]
},
{
component: NoMatch
}
]
定义时，一定要写在import的下方，要不然报错。
name是可选项，是为了让下面步骤中的Link标签能渲染链接名字。
routes是可选项，放子路由信息。
2、循环渲染匹配规则。
路由模块化本质就是先剥离路由，然后再在此循环渲染，拼接成和原本相同的代码。
使用if根据是否有exact属性判断，渲染成不同的路由标签。
剥离路由后，官方文档提供了如图所示的使用render函数传递子路由信息的写法。
3、改写跳转链接。
和上一步一样，改写成循环渲染的链接，跳转链接还要显示名字，{value.name}。
这就是为什么上面有些匹配规则添加设置了name，有些却没有。要在这里渲染成链接的都设置了name，方便很多。
嵌套路由
如上图所示，这是原本的写法。子组件也有自己的路由匹配规则。
如果父级url不固定，也就是有多个组件可以跳转到该组件，可以使用this.props.match.url获取父级url，具体如上图所示。
但现在要剥离路由，所以前面一开始，路由数组就嵌套了子路由的信息。
该组件可以通过props参数中的routes获取路由信息，即this.props.routes。
因为根组件渲染路由时，会把子路由信息传递过来，然后现在再渲染子路由，和剥离路由后的写法一样，如下图所示。
和剥离路由后的写法一样，改造子组件的路由链接
路由模块化
上面只是剥离了路由，现在要抽出来变成一个路由文件，封装成自定义的模块。
1、创建文件。
在src下创建一个model文件夹，用来装我们自定义的模块，在该文件夹下创建routes.js文件，写我们的路由模块。
2、在路由文件的头部，导入路由要用的组件。
举个例子，如上图所示。
3、把剥离出来的路由数组复制到路由文件，记得放在import的下方。
4、暴露模块，export default routes。
5、根组件导入路由文件，import routes from ‘./model/routes’。
6、注释根组件的路由数组代码，根组件和子组件都可以注释掉头部导入的组件，因为路由匹配规则已经不在组件内。
以上是 React学习笔记(五)：路由 的全部内容， 来源链接： utcz.com/z/382228.html
