日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react-router-dom入門使用教程(路由的模糊匹配與嚴格匹配)_React

作者：codeMak1r.小新 ? 更新時間： 2022-10-06 編程語言

模糊匹配

<!-- 編寫路由鏈接 -->
<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>

原文鏈接：https://blog.csdn.net/Svik_zy/article/details/125676698?spm=1001.2014.3001.5502

欄目分類
最近更新