React学习笔记(五)：路由

React学习笔记(五)：路由
这篇文章并不是一下子告诉你怎么做，而是一个学习过程，会不停的改造路由。

安装

cnpm i react-router-dom -S

导入
具体是看你用到哪个标签就导入哪个，比如

import { BrowserRouter as Router, Route, Link, Redirect, Switch, NavLink } from "react-router-dom"

编写路由匹配规则
如下图所示，这是在根组件写的路由匹配规则。

image.png

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标签。

image.png

NavLink标签可以给当前选中的路由a标签添加样式。

登录拦截（路由守卫、导航守卫）
1、在需要登录拦截的页面的state，定义一个登录flag。

image.png

2、在render函数中添加判断，判断位置写在return上面就行。判断是否有登录，如果没有登录，就跳转时登录页面。

image.png

至于这个登录flag怎么修改就看你们网站怎么写了。

下面介绍带参跳转的三种办法：get传值、动态路由传值、编程式导航。

get传值
1、在跳转标签里的跳转路径属性中，设置要传的参数。

image.png

在路径后面添加问号，然后就可以传参，多个参数之间使用&连接。
如图所示，传了第一个参数是变量aid，所以使用了es6的字符串模板语法，然后传了第二个参数是aaa=123。

2、接收参数的组件需要安装url模块来解析地址，cnpm i url -S。

3、导入url模块，import url from ‘url’

4、使用url模块解析地址

image.png

解析出来的query是个对象，里面包含传递过来的参数aid和aaa，可以比如query.aid来使用参数。

这段代码一般常常写在componentDidMount这个生命周期函数中。

动态路由传值
1、在跳转标签里的跳转路径属性中，设置要传的参数。

image.png

在路径后面添加斜杠，然后就可以传参，多个参数之间使用 / 连接。
如图所示，传了第一个参数是变量aid，所以使用了es6的字符串模板语法，然后传了第二个参数是123。

2、接收参数的组件如下图写。

image.png

params是个对象，里面包含传递过来的参数aid和aaa，可以比如params.aid来使用参数。

这段代码一般常常写在componentDidMount这个生命周期函数中。

3、修改路由匹配规则。

image.png

如图所示的写法，分别接收参数aid和aaa。

编程式导航、withRouter
不是通过点击标签来跳转，而是通过JS来跳转，就叫编程式导航，不需要写路由匹配规则。

1、导入withRouter，import { withRouter } from “react-router-dom”

2、改变暴露组件的写法。

image.png

使用withRouter暴露的组件，可以获得路由信息，就可以使用编程式导航。

3、准备要跳转的DOM，并绑定跳转函数。

image.png

4、编写跳转函数。

image.png

如图所示，第一个是返回上一页的函数，并不是上一层。

第二个是不带参的跳转页面函数。

第三个是带多个参数的跳转页面函数。建议在路径属性后面添加参数，要是在路径里传递参数，接收参数的组件还要使用url模块来解析，很麻烦。

5、接收参数的组件如下图写。

image.png

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、循环渲染匹配规则。

image.png

路由模块化本质就是先剥离路由，然后再在此循环渲染，拼接成和原本相同的代码。

使用if根据是否有exact属性判断，渲染成不同的路由标签。

剥离路由后，官方文档提供了如图所示的使用render函数传递子路由信息的写法。

3、改写跳转链接。

image.png

和上一步一样，改写成循环渲染的链接，跳转链接还要显示名字，{value.name}。

这就是为什么上面有些匹配规则添加设置了name，有些却没有。要在这里渲染成链接的都设置了name，方便很多。

嵌套路由

image.png
image.png

如上图所示，这是原本的写法。子组件也有自己的路由匹配规则。

如果父级url不固定，也就是有多个组件可以跳转到该组件，可以使用this.props.match.url获取父级url，具体如上图所示。

但现在要剥离路由，所以前面一开始，路由数组就嵌套了子路由的信息。

该组件可以通过props参数中的routes获取路由信息，即this.props.routes。

因为根组件渲染路由时，会把子路由信息传递过来，然后现在再渲染子路由，和剥离路由后的写法一样，如下图所示。

image.png

和剥离路由后的写法一样，改造子组件的路由链接

image.png

路由模块化
上面只是剥离了路由，现在要抽出来变成一个路由文件，封装成自定义的模块。

1、创建文件。

在src下创建一个model文件夹，用来装我们自定义的模块，在该文件夹下创建routes.js文件，写我们的路由模块。

2、在路由文件的头部，导入路由要用的组件。

image.png

举个例子，如上图所示。

3、把剥离出来的路由数组复制到路由文件，记得放在import的下方。

4、暴露模块，export default routes。

5、根组件导入路由文件，import routes from ‘./model/routes’。

6、注释根组件的路由数组代码，根组件和子组件都可以注释掉头部导入的组件，因为路由匹配规则已经不在组件内。