(1)、模糊匹配:
// 路由跳转 <MyNavLink to="/home/a/b">Home</MyNavLink> // 注册路由 <Route path="/home" component={Home}/>
点击侧边栏,跳转到 localhost:3000/home/a/b 我们的Home组件还是可以显示的,这就是模糊匹配
但是,反过来,代码如果是这样的话
<MyNavLink to="/home">Home</MyNavLink>
<Route path="/home/a/b" component={Home}/>
如果是这样的话,Home组件就不会显示了
总结:
-
Route中path中一个都不能少才可以匹配上,所以 NavLink中的to属性中只要有了Route中的所有path那么就可以匹配上了
-
但是如果我们NavLink的to属性,写的是 /a/home/b 的话也是显示不了Home的,只是以第一个/符号后面是否有Route的path路径才行的
原理:
在MyNavLink 中的to属性,会以/作为分隔符,所以就把home、a、b取出来了,并且把取出来的第一个和Route下的path进行比对,匹配上了就显示,匹配不上也不会和后面的a、b进行匹配了,就不会显示组件了。
(2)精准匹配:
介绍:
我们to属性的值和path属性的值要完全一样才行
实现:
准确的 exact (注册的时候就开启精准匹配),默认是模糊匹配,手动开启严格匹配
<Route exact={true} path="/gogocj/home" component={Home}/>
简略的写法:
<Route exact path="/gogocj/home" component={Home}/>
注意:
不要注册路由都全部开启严格匹配,这样会出现很多严重的问题
使用原则:
如果默认模糊匹配的时候没有发生诡异的情况,那么就不用开启严格匹配,否则就开启严格匹配模式
因为开启了之后,会导致无法继续匹配二级路由的情况
二、Redirect的使用
也就是一开始就自动跳转到一个默认的路径中去
位置:
放在Route注册路由的最下方
原理:
注册路由都没匹配上的话,就去Redirect指定的路径中
<Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Redirect to="/about"/> </Switch>
三、嵌套子路由
假如我们要给Home组件注册两个子组件路由的时候,
文件建立方式:
因为我们做的News和Message组件其实都是Home组件的子组件的,所以有两种文件建立的模式
(1)在Home文件夹下直接再建立文件夹
(2)在和Home同目录下,建立名为 Home_news的文件夹,看个人喜好了
路由的匹配
-
路由是有先后的注册顺序的,会先从最先注册的路由开始查询的
所以我们子组件嵌套路由,中的 to属性要做前面添加父组件的路径,比如:
<MyNavLink to="/home/news">News</MyNavLink>
原因:由于模糊匹配的原则,前面的home会匹配到父亲组件,所以跳转到的路径就 localhost:3000/home/news 了
-
这里就是为什么如果有子嵌套路由的话,就不要开始严格匹配的原因
<Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Redirect to="/about"/> </Switch>
因为 /home/news 路由一开始是从这三个最先注册的路由开始匹配的,由于模糊匹配所以匹配上了Home,之后才到Home里面再进行子路由的匹配的
如果是严格匹配的话,那么就是直接<Redirect to="/about"/> ,直接就到了About组件了,所以就是从外层就屏蔽掉了,根本就进不去子路由了
所以要:
{/* 注册路由 */} <Switch> <Route path="/home/news" component={News}/> <Route path="/home/message" component={Message}/> <Redirect to="/home/news"/> </Switch>