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

快捷導(dǎo)航

軟件下載

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

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

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

PHP ASP.NET ASP JavaScript

在線工具

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

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

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

react-router-dom入門(mén)使用教程(路由的模糊匹配與嚴(yán)格匹配)

更新時(shí)間：2022年08月10日 15:03:09 作者：codeMak1r.小新

這篇文章主要介紹了react-router-dom入門(mén)使用教程,主要介紹路由的模糊匹配與嚴(yán)格匹配，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

模糊匹配

<!-- 編寫(xiě)路由鏈接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注冊(cè)路由 -->
<Switch>
  <Route path="/home" component={Home} />
</Switch>

點(diǎn)擊Home，進(jìn)入路徑/home/a/b，此時(shí)模糊匹配到/home路徑的組件{Home}。

開(kāi)啟嚴(yán)格匹配

<!-- 編寫(xiě)路由鏈接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注冊(cè)路由 -->
<Switch>
  // 開(kāi)啟嚴(yán)格匹配：exact={true}
  <Route exact path="/home" component={Home} />
</Switch>

此時(shí)，點(diǎn)擊Home，進(jìn)入路徑/home/a/b，無(wú)法匹配/home路徑下的{Home}組件。

1.默認(rèn)使用的就是模糊匹配（簡(jiǎn)單記：【輸入的路徑】必須包含要【匹配的路徑】，且順序要一致。
2.開(kāi)啟嚴(yán)格匹配：

// 開(kāi)啟嚴(yán)格匹配：exact={true}
<Route exact path="/home" component={Home} />

3.嚴(yán)格匹配不要隨便開(kāi)啟，需要再開(kāi)，有些時(shí)候開(kāi)啟會(huì)導(dǎo)致無(wú)法繼續(xù)匹配二級(jí)路由

Redirect的使用

路由重定向

{/* 注冊(cè)路由 */}
<Switch>
  <Route path="/about" component={About} />
  <Route path="/home" component={Home} />
  <Redirect to="/home" />
</Switch>

一般寫(xiě)在所有路由注冊(cè)的最下方，當(dāng)所有路由都無(wú)法匹配時(shí)，跳轉(zhuǎn)到Redirect指定的路由。

嵌套路由使用

注冊(cè)子路由時(shí)要寫(xiě)上父路由的path值。 => /父路由path/子路由path。

路由的匹配是按照注冊(cè)路由的順序進(jìn)行的。

src項(xiàng)目結(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的子組件
例如：注冊(cè)Message組件時(shí)需要加上父路由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入門(mén)使用教程(路由的模糊匹配與嚴(yán)格匹配)的文章就介紹到這了,更多相關(guān)react-router-dom使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: