React尚硅谷075-093（React路由）

[](()模糊匹配与严格匹配

---

不能匹配上

to=“/home”

path=“/home/a/b”

模糊匹配，能匹配上（to可以给多，但是顺序要对）

to=“/home/a/b”

path=“/home”

精准匹配exact

出问题的时候再使用exact，需要再卡，有些时候会导致无法继续匹配二级路由

[](()Rrdirect重定向

---

跟谁都匹配不上的时候

[](()二级路由

---

• 路由的匹配是按照顺序来的

• 如果二级路由父路由开启了严格匹配，则会出错

[](()路由传参

---

urlencoded编码：key=value&key=value

路由组件收到的参数是history、location、match

params： 建议

{ele.title}

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

search： 不建议

{ele.title}

import qs from ‘que 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 rystring’

const { search } = this.props.location;

const {id,title}=qs.parse(search.slice(1))

state：

不会在地址栏看到参数，刷新不丢失

{ele.title}

const {id,title} =this.props.location.state;

[](()路由默认push模式

---

开启replace模式

{ele.title}

//或者直接replace

[](()编程式路由

---

获取传过来的值同上一点：路由传参

params：

<button onClick={()=>{this.pushShow(ele.id,ele.title)}}>push查看

<button onClick={()=>{this.replaceShow(ele.id,ele.title)}}>replace查看

replaceShow=(id,title)=>{

this.props.history.replace(/home/message/detail/${id}/${title})

}

pushShow=(id,title)=>{

this.props.history.push(/home/message/detail/${id}/${title})

}

query，search：

replaceShow=(id,title)=>{

this.props.history.replace(/home/message/detail?id=${id}&title=${title})

}

state：当第二个参数

replaceShow=(id,title)=>{

this.props.history.replace(/home/message/detail,{id,title})

}

[](()路由回退和前进

---

this.props.history.goBack()

this.props.history.goForward()

this.props.history.go()//0为刷新，1为前进一步，-1为后退一步