React系统学习笔记--超基础--超详细--超简洁--React路由（五）
1 相关理解
1.1 SPA的理解
单页Web应用（single page web application，SPA）
整个应用只有一个完整的页面
点击页面中的链接不会刷新页面，只会做页面的局部更新
数据都需要通过ajax请求获取，并在前端异步展现
1.2 路由的理解
什么是路由
一个路由就是一个映射关系(key：value)
key为路径， value可能是function或component
路由分类
后端路由
- 理解： value是function, 用来处理客户端提交的请求
- 注册路由： router.get(path, function(req, res))
- 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由
- 浏览器端路由，value是component，用于展示页面内容
- 注册路由:
- 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
1.3 react-router-dom的理解
相关概念
-
react的一个插件库
-
专门用来实现一个SPA应用
-
基于react的项目基本都会用到此库
相关api
内置组件
其他
-
history对象
-
match对象
-
withRouter函数
2 路由的基本使用
1、 明确好界面中的导航区、展示区
2、 导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3、 展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4、
//路由编写和路由注册都靠一个BrowserRouter去管理，所以BrowserRouter写外侧，一直扩
//还有一种就是BrowserRouter写在入口文件中，包住App就可以
ReactDOM.render(
<BrowserRouter><App/></BrowserRouter>,
document.getElementById('root')
)
细节：Link最终在浏览器转换为a标签
3 路由组件与一般组件
写法不同
一般组件：
路由组件：
存放位置不同
一般组件：components
路由组件：pages
接收到的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"
Link标签，不能追加一个高亮样式，用Link的升级版：
4 NavLink使用与封装
NavLink可以
实现路由链接的高亮，通过activeClassName指定样式名
默认高亮就是active，正好与bootstrap样式类名相同。我们也可以自己指定样式（权重给高一点盖过bootstrap）
.NavTitle {
background-color: rgb(183, 238, 119) !important;
color: #fff !important;
}
<NavLink activeClassName='NavTitle' className="list-group-item" to='/about'>About</NavLink>
<NavLink activeClassName='NavTitle' className="list-group-item" to='/home'>Home</NavLink>
要是按上面这样写，感觉重复内容有点多，于是可以封装一下：
封装MyNavLink（一般组件）
props用于传递标签属性，标签体内容怎么接收呢！
重点：标签体内容其实也是特殊的属性，只不过我们只能写value，key是人家指定的children；所以我们其实也可以不写标签体内容，然后通过children标签属性来配置
//封装示例
export default class MyNavLink extends Component {
render() {
return (
/* 注意：这里也把标签体内容带过去了，在children属性里面 */
<NavLink activeClassName="NavTitle" className="list-group-item" {...this.props}/>
)
}
}
//使用--标签体内容直接写，props会帮我们收集到children标签属性里面
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
5 Switch的使用
通常情况下，path和component是一一对应的关系
但是如果出现两个相同的路径，匹配两个不同的组件，我们想让它匹配到第一个之后就结束了（提高效率）
Switch可以提高路由匹配效率(单一匹配) ---- 即匹配到一个后将不再往下匹配
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Route path="/home" component={Test}/>
</Switch>
6 解决多级路径刷新页面样式丢失的问题
为什么会丢失
写多级路由的时候，刷新页面之后会丢失，浏览器会把前面一级的路由当作public文件夹下的，错误路径返回的结果由index.html兜底
三种解决方法
public/index.html 中 引入样式时不写 ./ 写 / （常用）
public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用,但只在react中有效果）
使用HashRouter (不常用)，#后面的是前端资源，不带给服务器
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react脚手架title>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="/css/bootstrap.css">
head>
<body>
<div id="root">div>
body>
html>
7 路由的严格匹配与模糊匹配
给的路径是/home，人家要的是/home/a/b，不匹配
给的路径是/home/a/b，人家要的是/home，匹配—模糊匹配
给的路径是/a/home/b，人家要的是/home，不匹配
模糊匹配
默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】多了可以不能少，且顺序要一致）
严格匹配
开启严格匹配：exact={true}为exact
注意：严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
//编写路由链接
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home/a/b">Home</MyNavLink>
{/* 注册路由 */}
<Switch>
<Route exact path="/about" component={About}/>
<Route exact path="/home" component={Home}/>
</Switch>
8 Redirect的使用
想要页面上来就帮我选中一个
一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
9 嵌套路由
注册子路由时要写上父路由的path值
路由的匹配是按照注册路由的顺序进行的
-------------------注册一级路由-----------------------------
{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
----------------------注册二级路由 :Home组件-----------------------------------
<div>
<ul className="nav nav-tabs">
<li>
<MyNavLink to="/home/news">News</MyNavLink>
</li>
<li>
<MyNavLink to="/home/message">Message</MyNavLink>
</li>
</ul>
{/* 注册路由 */}
<Switch>
<Route path="/home/news" component={News}/>
<Route path="/home/message" component={Message}/>
<Redirect to="/home/news"/>
</Switch>
</div>
10 向路由组件传递参数
10.1 params参数
路由链接(携带参数)：详情
注册路由(声明接收)：
接收的参数存在参数：this.props.match.params
-------------------------------发送参数:父组件----------------------------------------------
<div>
{/* 向路由组件传递params参数 */}
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
<hr />
{/* 声明接收params参数 */}
<Route path="/home/messages/detail/:id/:title" component={Detail} />
</div>
--------------------------------接受参数:子组件-----------------------------------------------------------
const {id,title} = this.props.match.params
10.2 search参数
路由链接(携带参数)：详情
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.search（没帮我们整理成对象形式）
备注：获取到的search是urlencoded编码字符串，需要借助qs库解析
注意：由于search接收的时候没帮我们处理成对象形式，所以我们需要借助react中的库来处理。新版的库与之前的不同import qs from 'qs'
name=tom&age=18这种编码形式叫做urlencoded编码形式
对象转urlencoded：qs.stringify(obj)
urlencoded转对象：qs.parse(str)
-------------------------------发送参数:父组件----------------------------------------------
<div>
{/* 向路由组件传递search参数 */}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
<hr />
{/* search参数无需声明接收，正常注册路由即可 */}
<Route path="/home/messages/detail" component={Detail}/>
</div>
--------------------------------接受参数:子组件-----------------------------------------------------------
import qs from 'qs'
// 接收search参数
const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))
10.3 state参数
地址栏是看不见参数的，但是刷新数据不会丢，因为我们目前使用的是BrowserRouter，一直操作浏览器的history（location是history中的一个属性，不会丢；清空历史记录的话就会丢）
路由链接(携带参数)：详情，to写成对象
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.state
- 备注：使用
BrowserRouter刷新才可以保留住参数,使用HashRouter刷新后state将会没有history来保存参数 - 子组件接受参数时
const {id,title} = this.props.location.state || {}，后面添加||{}是防止使用HashRouter后state为undefined时报错
-------------------------------发送参数:父组件----------------------------------------------
<div>
{/* 向路由组件传递state参数 */}
<Link to={{pathname:'/home/messages/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
<hr />
{/* state参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail}/>
</div>
--------------------------------接受参数:子组件-----------------------------------------------------------
// 接收state参数,后面添加`||{}`是防止使用`HashRouter`后state为undefined时报错
const {id,title} = this.props.location.state || {}
11 push与replace
push是压栈操作，会留下历史记录。replace是替换操作，把栈顶元素替换成当前元素。
push模式：默认开启push模式
replace模式：replace={true}，可以简写为 replace
<Link replace={true} to={{ pathname: '/home/messages/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>
12 编程式路由导航
有一个需求：等3秒钟自动路由跳转，借助Link和NavLink难以实现
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
this.prosp.history.push()
将历史记录压入栈
this.props.history.replace()
替代栈位置,即不会产生历史记录
this.props.history.goBack()
回退一格
this.props.history.goForward()
前进一格
this.props.history.go()
前进或者后退n格(根据传入的数字正负数)
import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'
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参数 */}
{/* {msgObj.title} */}
{/* 向路由组件传递search参数 */}
{/* {msgObj.title} */}
{/* 向路由组件传递state参数 */}
<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>
<button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
<button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button>
</li>
)
})
}
</ul>
<hr />
{/* 声明接收params参数 */}
{/* */ }
{/* search参数无需声明接收，正常注册路由即可 */}
{/* */ }
{/* state参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail} />
<button onClick={this.back}>回退</button>
<button onClick={this.forward}>前进</button>
<button onClick={this.go}>go</button>
</div>
)
}
}
//记得detail组件中也要响应修改接收的参数形式
//news组件中用编程式路由导航控制路由跳转
componentDidMount() {
setTimeout(() => {
this.props.history.push('/home/messages')
}, 2000)
}
13 withRouter的使用
withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
withRouter的返回值是一个新组件
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
class Header extends Component {
back = () => { this.props.history.goBack()}
forward = () => {this.props.history.goForward()}
go = () => { this.props.history.go(-2)}
render() {
console.log('Header组件收到的props是', this.props);
return (
<div className="page-header">
<h2>React Router Demo</h2>
<button onClick={this.back}>回退</button>
<button onClick={this.forward}>前进</button>
<button onClick={this.go}>go</button>
</div>
)
}
}
export default withRouter(Header)
14 BrowserRouter与HashRouter的区别
前端路由的原理就是：点击路由链接引起路径的变化，被路由器检测到，多次点击留下历史记录
备注：HashRouter可以用于解决一些路径错误相关的问题。即在
问题6中引入文件时可以不进行路径修改
14.1 底层原理不一样
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本
但一般来说都用的这个
HashRouter使用的是URL的哈希值
14.2 path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
14.3 刷新后对路由state参数的影响
BrowserRouter没有任何影响，因为state保存在history对象中
HashRouter刷新后会导致路由state参数的丢失！！！，因为HashRouter不用history这个API