react-router-dom入门使用教程(路由的模糊匹配与严格匹配)
模糊匹配
<!-- 编写路由链接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注册路由 -->
<Switch>
<Route path="/home" component={Home} />
</Switch>点击Home,进入路径/home/a/b,此时模糊匹配到/home路径的组件{Home}。

开启严格匹配
<!-- 编写路由链接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注册路由 -->
<Switch>
// 开启严格匹配:exact={true}
<Route exact path="/home" component={Home} />
</Switch>
此时,点击Home,进入路径/home/a/b,无法匹配/home路径下的{Home}组件。

1.默认使用的就是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且顺序要一致。
2.开启严格匹配:
// 开启严格匹配:exact={true}
<Route exact path="/home" component={Home} />
3.严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
Redirect的使用
路由重定向
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
<Redirect to="/home" />
</Switch>
一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由。
嵌套路由使用
注册子路由时要写上父路由的path值。 => /父路由path/子路由path。
路由的匹配是按照注册路由的顺序进行的。
src项目结构
├─App.jsx ├─index.js ├─pages | ├─Home | | ├─index.jsx | | ├─News | | | └index.jsx | | ├─Message | | | └index.jsx | ├─About | | └index.jsx ├─components | ├─MyNavLink | | └index.jsx | ├─Header | | └index.jsx
Message是Home的子组件,News组件是Home的子组件
例如:注册Message组件时需要加上父路由Home的path值:/home/message
<Switch>
<Route path="/home/news" component={News} />
<Route path="/home/message" component={Message} />
<Redirect to="/home/news" />
</Switch>
到此这篇关于react-router-dom入门使用教程(路由的模糊匹配与严格匹配)的文章就介绍到这了,更多相关react-router-dom使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React Hooks的useState、useRef使用小结
React Hooks 是 React 16.8 版本引入的新特性,useState和useRef是两个常用的Hooks,本文主要介绍了React Hooks的useState、useRef使用,感兴趣的可以了解一下2024-01-01
浅谈React的React.FC与React.Component的使用
本文主要介绍了React的React.FC与React.Component的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-09-09
如何应用 SOLID 原则在 React 中整理代码之开闭原则
React 不是面向对象,但这些原则背后的主要思想可能是有帮助的,在本文中,我将尝试演示如何应用这些原则来编写更好的代码,对React SOLID原则开闭原则相关知识感兴趣的朋友一起看看吧2022-07-07


最新评论