React 路由 V5（完整版）

一.什么是路由？
指路径url与不同的页面和内容进行相应匹配，可以友好的解决Component到url之间的同步映射关系
二.路由的使用
(1).下载react-router
指令（指定v5版本）：npm install react-router-dom@5
(2).app内引入

import {HashRouter,Route} from 'react-router-dom'//hash模式，路径
中会带#号
<div>
<HashRouter>
	<Route path='路径' component={组件名称}>//一级路由
<HashRouter/>
<div/>
1
2
3
4
5
6
7

(3).路由组件封装
为了方便对路由管理，可单独封装起来
创建一个router文件夹
–router.js

import {HashRouter,Route} from 'react-router-dom'

export default function Routers (){
	return (
	<div>
		<HashRouter>
			<Route path='路径' component={组件名称}>//一级路由
		<HashRouter/>
	</div>
)
}
1
2
3
4
5
6
7
8
9
10
11

在app文件中引入：

import Routers from './router/router';

function App() {
  return (
    <div className="App">
     	{/*其他内容*/}
        <Routers ></Routers >
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10

注：需要用路由进行加载的页面可单独创建view文件进行存放管理

三.路由重定向
在根路径下，或者不存在的路径会自动匹配到Redirect指定的路径（模糊匹配）

import {HashRouter,Route,Redirect} from 'react-router-dom'
<Redirect from="/根路径" to="需要跳转到的路径"/>
1
2

问题：会存在即使在其他路径下只要刷新页面就会跳转到to指定的路径页面
解决方法：使用switch进行包裹,只渲染匹配到的第一个路由

import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
<Switch>
<Redirect from="/根路径" to="需要跳转到的路径"/>
</Switch>
1
2
3
4

当我们需要将不存在的路径跳转到我们自己设置的404页面时，可以将Redirect设置成精确匹配模式，exact

import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
<Switch>
<Redirect from="/" to="需要跳转到的路径" exact / > //只有在/下会跳转到指定路径

//当路径不存在时会自动跳转至notfound页面，需要自定义此页面
<Route component={NotFound}>
</Switch>
1
2
3
4
5
6
7

四.嵌套路由
也是二级路由，需要在同一页面下展示不同组件时可以使用
与一级路由结构完全相同，只命名方式不同。此嵌套路由需要在一级路由对应的组件内部进行编写

import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
<Switch>
<Route path='/一级路由路径/子路径' component={组件名称}>//一级路由
<Redirect from="/一级路由路径" to="/一级路由路径/子路径" / > //当处于一级路由时指定展示二级路由显示页面


</Switch>
1
2
3
4
5
6
7

五.声明式导航与编程式导航
(1)声明式导航
提供了NavLink标签供我们做跳转使用（类似于js原生a标签）
注意：NavLink必须写在route下面

import {NavLink } from 'react-router-dom'
<NavLink to="要跳转的页面路径" activeClassName="自定义高亮样式名称"></NavLink>
1
2

(2)编程式导航
类似与window.location.href=“要跳转的路径”，当组件写在route中被渲染时，会继承route提供的属性，可在props中获得到history等，可用props.history.push(路径${id})进行跳转，函数式组件封装了useHistory，可引入进行代替

import {useHistory} from 'react-router-dom'

const history=useHistory()

//使用
history.push(`路径${id}`)
1
2
3
4
5
6

类组件中使用this.props.history.push(`路径${id}`)进行跳转
1

六.动态路由（路由传参）
当我们需要获取不同id值展示不同的详情页面时，需要使用到动态路由获取参数

//动态路由传参(params传参)
history.push(`路径${id}`)
<Route path:'/detail/:id' component={Detail}>
//可通过props.match.params拿到我们传递的值id
1
2
3
4

其他路由传参方式

//query传参
history.push({pathName:"/detail" query:{myid:id})
<Route path:'/detail' component={Detail}>
//可通过props.location.query拿到我们传递的值id
//state传参
history.push({pathName:"/detail" state:{myid:id})
<Route path:'/detail' component={Detail}>
//可通过props.location.state拿到我们传递的值id
1
2
3
4
5
6
7
8

注意：动态路由不会出现路由参数丢失的情况
七.路由拦截
例如我的信息页面，订单，购物车页面都需要进行路由守卫（拦截）处理
将Route的component换成render函数的写法来进行路由限制

<Route path="/center" render={(props)=>{
		//此处可进行逻辑编写，判断用户是否登录以及是否有权限
		return 是否授权？<Center {...props}/> : < Redirect to='/login' />
}}/>
//单独设置登录页面
<Route path='/login' component={Login}/>
1
2
3
4
5
6

八.路由模式（不携带路由格式中的#号）

将<HashRouter>替换成<BrowserRouter>
将导入的Router重命名可以用as
import {HashRouter as Router } from 'react-router-dom'
<Router >
</ Router >
1
2
3
4
5

注意：BrowserRouter会真正朝后端发请求要页面，后端如果没有对应的路径处理路径，就会404
九.WithRouter

import {WithRouter } from 'react-router-dom'
//包裹需要传值的子组件
const wRouter = WithRouter(mycomponent)
//mycomponent组件内部会继承父组件的传参，高阶组件原理
1
2
3
4