详细介绍React路由

路由

单页Web应用（single page web application，SPA），整个应用只有一个完整的页面，点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。

一个路由就是一个映射关系(key:value)，key为路径, value可能是function或component。
后端路由：

1. 理解：value是function, 用来处理客户端提交的请求。
2. 注册路由： router.get(path, function(req, res))
3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

1. 浏览器端路由，value是component，用于展示页面内容。
2. 注册路由: <Route path="/test" component={Test}>
3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

React路由

react-router-dom是react的一个插件库，专门用来实现一个SPA应用，基于react的项目基本都会用到此库。使用命令npm i react-router-dom下载。
相关API：内置组件：

1.	<BrowserRouter>
2.	<HashRouter>
3.	<Route>
4.	<Redirect>
5.	<Link>
6.	<NavLink>
7.	<Switch>

v6新版本改动

在版本为6的react-router和react-router-dom的使用中，与旧版有一点差别。

• Switch变为Routes，所有的Route组件都应该被Routes包裹，在Routes组件外使用Route将报错。
• Redirect变为Navigate，Navigate组件不能写在Routes中，否则也会报错，也就是Routes组件只接收Route作为其子组件。
• v6移出了WithRouter，添加了一些新的hooks。

相关文章1
相关文章2

路由的基本使用

//App.jsx

import React, {
    
     Component } from 'react'
import {
    
    Link,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
export default class App extends Component {
    
    
	render() {
    
    
		return (
			<div>
				{
    
    /* 原生html中，靠<a>跳转不同的页面 */}
				{
    
    /* <a className="list-group-item" href="./about.html">About</a>
				<a className="list-group-item active" href="./home.html">Home</a> */}
				
				
				{
    
    /* 在React中靠路由链接实现切换组件--编写路由链接 */}
				<Link to="/about">About</Link>
				<Link to="/home">Home</Link>
				
				{
    
    /* 注册路由，进行路径的匹配 */}
				<Route path="/about" component={
    
    About}/>
				<Route path="/home" component={
    
    Home}/>
			</div>
		)
	}
}

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {
    
    BrowserRouter} from 'react-router-dom'
import App from './App'
//<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

路由组件与一般组件

1.写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
一般组件：components/
路由组件：pages/
3.接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性

history:
			go: ƒ go(n)
			goBack: ƒ goBack()
			goForward: ƒ goForward()
			push: ƒ push(path, state)
			replace: ƒ replace(path, state)
location:
			pathname: "/about"
			search: ""
			state: undefined
match:
			params: {
    
    }
			path: "/about"
			url: "/about"

NavLink和Switch

NavLink ：
<Link to="/about">About</Link>的升级版：
<NavLink activeClassName="zagiee" to="/about">About</NavLink>可以多传一个属性，activeClassName，点击当前可以加一个类名，添加一些样式,shi。

Switch：
通常情况下，path和component是一一对应的关系。Switch可以提高路由匹配效率(单一匹配)。

当有多个path相同的情况，不用Switch包的话匹配到home时，第一个匹配了还会往下继续匹配，第二个也会匹配，从而两个都展示，包住后匹配到第一个后就不往下匹配了，从而只显示第一个。

扫描二维码关注公众号，回复： 14833180 查看本文章

{
    
    /* 注册路由 */}
<Switch>
	<Route path="/about" component={
    
    About}/>
	<Route path="/home" component={
    
    Home}/>
	<Route path="/home" component={
    
    Test}/>
</Switch>

解决多级路径刷新页面样式丢失的问题

当路径是多级时，刷新页面可能会造成样式丢失问题。

<Link to="/zagiee/home">Home</Link>
<Route path="/zagiee/home" component={
    
    Home}/>

解决方法：
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter（不常用）

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（输入的路径to必须包含要匹配的路径paath，且顺序要一致）。
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>，简写：<Route exact path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
4.一般path=”/"这个路由一般会加上exact，否则它也会匹配’/home’导致这个路由就没用了。
另外嵌套路由不要加exact属性，如果父级路由加上，他下面的子路由将不会生效，因为外层强制匹配了

向路由组件传递参数

1.params参数
路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
接收参数：this.props.match.params
2.search参数
路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={ {pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数，前两个也可以。

//Message/index.jsx

state = {
    
    
		messageArr:[
			{
    
    id:'01',title:'消息1'},
			{
    
    id:'02',title:'消息2'},
			{
    
    id:'03',title:'消息3'},
		]
	}
render() {
    
    
	const {
    
    messageArr} = this.state
	return (
		<div>
			<ul>
				{
    
    
					messageArr.map((msgObj)=>{
    
    
						return (
							<li key={
    
    msgObj.id}>

								{
    
    /* 向路由组件传递params参数 */}
								{
    
    /* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

								{
    
    /* 向路由组件传递search参数 */}
								{
    
    /* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

								{
    
    /* 向路由组件传递state参数，双括号是对象，单括号是js模板字符串，前两种也能写成对象形式 */}
								<Link to={
    
    {
    
    pathname:'/home/message/detail',state:{
    
    id:msgObj.id,title:msgObj.title}}}>{
    
    msgObj.title}</Link>

							</li>
						)
					})
				}
			</ul>			
			<hr/>
			{
    
    /* 声明接收params参数 */}
			{
    
    /* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}
			
			{
    
    /* search参数无需声明接收，正常注册路由即可 */}
			{
    
    /* <Route path="/home/message/detail" component={Detail}/> */}
			
			{
    
    /* state参数无需声明接收，正常注册路由即可 */}
			<Route path="/home/message/detail" component={
    
    Detail}/>
		</div>

//Message/Detail/index.jsx
import React, {
    
     Component } from 'react'
// import qs from 'qs'

const DetailData = [
	{
    
    id:'01',content:'你好，中国'},
	{
    
    id:'02',content:'你好，尚硅谷'},
	{
    
    id:'03',content:'你好，未来的自己'}
]
export default class Detail extends Component {
    
    
	render() {
    
    
		console.log(this.props);

		// 接收params参数
		// const {id,title} = this.props.match.params 

		// 接收search参数
		// const {search} = this.props.location
		// const {id,title} = qs.parse(search.slice(1))

		// 接收state参数,加 || {}是为了防止报错，有值就用，没值就undefined
		const {
    
    id,title} = this.props.location.state || {
    
    }

		const findResult = DetailData.find((detailObj)=>{
    
    
			return detailObj.id === id
		}) || {
    
    }
		return (
			<ul>
				<li>ID:{
    
    id}</li>
				<li>TITLE:{
    
    title}</li>
				<li>CONTENT:{
    
    findResult.content}</li>
			</ul>
		)
	}
}

push和replace

push：当前看到的是栈顶地址，点击回退会出栈然后回到上一个页面（message）。

replace是用它替换栈顶地址，回退会回到news。

<Link replace to={
    
    `/home/message/detail/?id=${
      
      msgObj.id}&title=${
      
      msgObj.title}`}>{
    
    msgObj.title}</Link>

编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

this.prosp.history.push()
this.prosp.history.replace()
this.prosp.history.goBack()
this.prosp.history.goForward()
this.prosp.history.go()

export default class Message extends Component {
    
    
	state = {
    
    
		messageArr:[
			{
    
    id:'01',title:'消息1'},
			{
    
    id:'02',title:'消息2'},
			{
    
    id:'03',title:'消息3'},
		]
	}

	replaceShow = (id,title)=>{
    
    
		//replace跳转+携带params参数
		//this.props.history.replace(`/home/message/detail/${id}/${title}`)

		//replace跳转+携带search参数
		// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

		//replace跳转+携带state参数
		this.props.history.replace(`/home/message/detail`,{
    
    id,title})
	}

	pushShow = (id,title)=>{
    
    
		//push跳转+携带params参数
		// this.props.history.push(`/home/message/detail/${id}/${title}`)

		//push跳转+携带search参数
		// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

		//push跳转+携带state参数
		this.props.history.push(`/home/message/detail`,{
    
    id,title})
		
	}

	back = ()=>{
    
    
		this.props.history.goBack()
	}

	forward = ()=>{
    
    
		this.props.history.goForward()
	}

	go = ()=>{
    
    
		this.props.history.go(-2)
	}

	render() {
    
    
		const {
    
    messageArr} = this.state
		return (
			<div>
				<ul>
					{
    
    
						messageArr.map((msgObj)=>{
    
    
							return (
								<li key={
    
    msgObj.id}>

									{
    
    /* 向路由组件传递params参数 */}
									{
    
    /* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

									{
    
    /* 向路由组件传递search参数 */}
									{
    
    /* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

									{
    
    /* 向路由组件传递state参数 */}
									<Link to={
    
    {
    
    pathname:'/home/message/detail',state:{
    
    id:msgObj.id,title:msgObj.title}}}>{
    
    msgObj.title}</Link>

									&nbsp;<button onClick={
    
    ()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
									&nbsp;<button onClick={
    
    ()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
								</li>
							)
						})
					}
				</ul>
				<hr/>
				{
    
    /* 声明接收params参数 */}
				{
    
    /* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

				{
    
    /* search参数无需声明接收，正常注册路由即可 */}
				{
    
    /* <Route path="/home/message/detail" component={Detail}/> */}

				{
    
    /* state参数无需声明接收，正常注册路由即可 */}
				<Route path="/home/message/detail" component={
    
    Detail}/>

				<button onClick={
    
    this.back}>回退</button>&nbsp;
				<button onClick={
    
    this.forward}>前进</button>&nbsp;
				<button onClick={
    
    this.go}>go</button>

			</div>
		)
	}
}

withRouter

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API，withRouter的返回值是一个新组件。

//一般组件Header/index.jsx
import {
    
    withRouter} from 'react-router-dom'
class Header extends Component {
    
    
	……
}
export default withRouter(Header)

BrowserRouter与HashRouter的区别

1.底层原理不一样
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响，因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失！！！
4.备注：HashRouter可以用于解决一些路径错误相关的问题。