腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频