react-router中的exact和strict

摘要： 前言 每次用配置 react 路由都會考慮是否應該給給 <Route> 元件加上 exact 或 strict 。下面妹子將於自認為比較清晰的方式列舉出來什麼場景需要加和不加。 本文案例主要以react-router v4+為主，v5版本是因為釋出時版本依賴有問題而直接...

前言

每次用配置 react 路由都會考慮是否應該給給 <Route> 元件加上 exact 或 strict 。下面妹子將於自認為比較清晰的方式列舉出來什麼場景需要加和不加。

本文案例主要以react-router v4+為主，v5版本是因為釋出時版本依賴有問題而直接跳成這個大版本的,用法和4完全相同，就是這麼任性 > < ，升級詳情可看本文最後連結

exact

exact 預設為false，如果為true時，需要和路由相同時才能匹配，但是如果有斜槓也是可以匹配上的。

如果在父路由中加了 exact ，是不能匹配子路由的,建議在子路由中加 exact ，如下所示

//父路由
<Switch>
<Route path="/a" component={ComponentA} />
</Switch>

//子路由，tuanDetail元件裡
<Switch>
<Route path="/a/b" exact component={ComponentB}/>
</Switch>

strict

<Route strict path="/one" component={About} />

strict 預設為false，如果為true時，路由後面有斜槓而url中沒有斜槓，是不匹配的

案例

總結

如果沒有子路由的情況，建議大家配都加一個 exact ；如果有子路由，建議在子路由中加 exact ，父路由不加；

而 strict 是針對是否有斜槓的，一般可以忽略不配置。

其他連結

Happy coding .. :)