React学习笔记(五):路由

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

回到顶部