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、循环渲染匹配规则。
在这里插入图片描述
路由模块化本质就是先剥离路由，然后再在此循环渲染，拼接成和原本相同的代码。