[](()模糊匹配与严格匹配
不能匹配上
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为后退一步