react-router-dom入門使用教程(路由的模糊匹配與嚴(yán)格匹配)
更新時間：2022年08月10日 15:03:09 作者：codeMak1r.小新
這篇文章主要介紹了react-router-dom入門使用教程,主要介紹路由的模糊匹配與嚴(yán)格匹配，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
模糊匹配
<!-- 編寫路由鏈接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注冊路由 -->
<Switch>
<Route path="/home" component={Home} />
</Switch>點擊Home，進(jìn)入路徑/home/a/b，此時模糊匹配到/home路徑的組件{Home}。
開啟嚴(yán)格匹配
<!-- 編寫路由鏈接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注冊路由 -->
<Switch>
// 開啟嚴(yán)格匹配：exact={true}
<Route exact path="/home" component={Home} />
</Switch>
此時，點擊Home，進(jìn)入路徑/home/a/b，無法匹配/home路徑下的{Home}組件。
1.默認(rèn)使用的就是模糊匹配（簡單記：【輸入的路徑】必須包含要【匹配的路徑】，且順序要一致。
2.開啟嚴(yán)格匹配：
// 開啟嚴(yán)格匹配：exact={true}
<Route exact path="/home" component={Home} />
3.嚴(yán)格匹配不要隨便開啟，需要再開，有些時候開啟會導(dǎo)致無法繼續(xù)匹配二級路由
Redirect的使用
路由重定向
{/* 注冊路由 */}
<Switch>
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
<Redirect to="/home" />
</Switch>
一般寫在所有路由注冊的最下方，當(dāng)所有路由都無法匹配時，跳轉(zhuǎn)到Redirect指定的路由。
嵌套路由使用
注冊子路由時要寫上父路由的path值。 => /父路由path/子路由path。
路由的匹配是按照注冊路由的順序進(jìn)行的。
src項目結(jié)構(gòu)
├─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>
到此這篇關(guān)于react-router-dom入門使用教程(路由的模糊匹配與嚴(yán)格匹配)的文章就介紹到這了,更多相關(guān)react-router-dom使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解React服務(wù)端渲染從入門到精通，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
本文主要介紹了React使用有限狀態(tài)機的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React?Hooks的useState、useRef使用小結(jié)
React Hooks 是 React 16.8 版本引入的新特性，useState和useRef是兩個常用的Hooks，本文主要介紹了React?Hooks的useState、useRef使用，感興趣的可以了解一下2024-01-01
這篇文章主要介紹了React?less?實現(xiàn)縱橫柱狀圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何通過React自動化實現(xiàn)骨架屏,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了React實現(xiàn)全局組件的Toast輕提示效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了使用store來優(yōu)化React組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
淺談React的React.FC與React.Component的使用
本文主要介紹了React的React.FC與React.Component的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
如何應(yīng)用?SOLID?原則在?React?中整理代碼之開閉原則
React?不是面向?qū)ο?，但這些原則背后的主要思想可能是有幫助的，在本文中，我將嘗試演示如何應(yīng)用這些原則來編寫更好的代碼，對React?SOLID原則開閉原則相關(guān)知識感興趣的朋友一起看看吧2022-07-07
這篇文章主要總結(jié)介紹了關(guān)于React中ES5與ES6的寫法區(qū)別，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04