react-router中的exact和strict

谁践踏了优雅 2022-01-20 05:03 202阅读 0赞

### 前言 ###

每次用配置`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 ###

`strict`默认为false，如果为true时，路由后面有斜杠而url中没有斜杠，是不匹配的

### 案例 ###

### 总结 ###

如果没有子路由的情况，建议大家配都加一个`exact`；如果有子路由，建议在子路由中加`exact`，父路由不加； 而`strict`是针对是否有斜杠的，一般可以忽略不配置。

## 其他链接 ##

> 原文地址:[raoenhui.github.io/react/2019/…][raoenhui.github.io_react_2019] [reacttraining.com/react-route…][reacttraining.com_react-route] [reacttraining.com/blog/react-…][reacttraining.com_blog_react-]

Happy coding .. :)

[raoenhui.github.io_react_2019]: https://link.juejin.im?target=https%3A%2F%2Fraoenhui.github.io%2Freact%2F2019%2F05%2F04%2Fexact-strict%2F
[reacttraining.com_react-route]: https://link.juejin.im?target=https%3A%2F%2Freacttraining.com%2Freact-router%2Fweb%2Fapi%2FRoute%2Fexact-bool
[reacttraining.com_blog_react-]: https://link.juejin.im?target=https%3A%2F%2Freacttraining.com%2Fblog%2Freact-router-v5%2F