对 SPA 的理解

工作原理

靠监测 url 路由就是映射关系

后端路由

前端路由

锚点跳转

前端路由工作原理

History的两种方式

一

H5 新推出的API

二

hash 值（锚点）

react-router-dom 的理解

hashHistory createhistory的区别

hashRouter 和 browserRouter的区别

• 底层原理不同 后者操作H5的history对象
• path 表现形式不一样
• 前者刷新会把state参数丢失

路由组件 一般组件的区别

前者随便传属性，后者自带浏览器传的关于 history 的方法

NavLink

可以给路由组件追加一个 activeClassName 属性，功能如其名。默认有一个值 active

<NavLink activeClassName='atguigu' className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName='atguigu' className="list-group-item" to="/home">Home</NavLink>

路径问题 解决刷新后样式丢失

把路径写成绝对路径

• 去掉./
• 改成 %PUBLIC_URL%
• 改用 HashRouter

路由的精准匹配和模糊匹配

默认模糊匹配

开启精准匹配

<Route exact={true} path="/about" component={About}/>

路由的重定向

<Redirect to={"/about"}></Redirect>

向路由组件传递参数

1. params 参数

传递参数

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

{/* 声明接受 params 参数 */}
<Route path="/home/message/detail/:id/:title" component={Detail}></Route>

接收参数 在路由组件中，从props里取出参数

const {id, title} = this.props.match.params

2. search 参数

传递参数

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

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

接收参数

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

3. state 参数

传递参数

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

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

接收参数

这里或上一个空对象是为了处理在没有缓存的情况下，state为空时的报错

// 接收state参数
const {id,title} = this.props.location.state || {}

路由跳转的方式

push

默认为push方式

replace

<Link repalce={true}/>

编程式路由和声明式路由

使用this.props.history上的API进行路由操作

新的问题——一般组件没有history，怎么进行路由操作呢？

通过 withRouter 将一般组件变成路由组件，它返回一个新组件。

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

export default withRouter(Header)