说说 router4的exact 属性

• 2020 年 3 月 17 日
• 笔记

这段时间正在研究 react router4 ，发现了其中一个很特别的属性。因为没有系统的看过官方的文档，所以在这里也频繁的踩坑。在网上也看过很多文章，结果还是踩坑。现在终于把坑踩平了，今天就把这个小小的知识点记录下来。加深一下理解。

本文就说说 v4中增加的这个属性- exact。

作用

这个属性干嘛的呢？

直接翻译就知道他的意思是精确的意思，那他的作用是什么呢？

看下面这段代码：

这是 v4中的写法

<BrowserRouter>      <Switch>          <Route path='/' component={App} />          <Route path='/detail' component={Detail} />          <Route path='/list' component={List} />      </Switch>  </BrowserRouter>

看上去这个代码好像没什么问题，但是执行结果却不是那么尽如人意。

在浏览器地址中任意切换到上面的路由，它始终渲染的是 App这个组件。

为什么呢？

所以这里我们就需要用到上面的属性 – exact,这个属性的默认值是 false，所以内部采用是模糊匹配，只要匹配到一个就不会往后再匹配。

<Route path='/' exact={false} component={App} />

所以模糊匹配下的结果就是 path='/', 对应的组件就是 App

/  可以匹配 path='/'

那好这个时候我们加上了精确匹配，当然不需要每个都添加，我们只需要在第一个路由上加上就可以了（这句话有时候对），加上之后的意思就是必须是完全相等的值才可以匹配到。

location /   ===   route path='/'

到现在为止我们增加了一个属性就已经可以满足我们的需求，但是再看下下面这段代码

<BrowserRouter>      <Switch>          <Route path='/' exact={true} component={App} />          <Route path='/detail' component={Detail} />         + <Route path='/detail/:id' component={DetailA} />          <Route path='/list' component={List} />      </Switch>  </BrowserRouter>

这个时候我们访问 /、/list、/detail 都没有问题。

可是访问 /detail/100 的时候渲染的还是 Detail 组件。

问题还是咱们上面发现的问题，解决办法就是需要增加 exact属性

 <Route path='/detail' exact={true} component={Detail} />

最后总结

这个知识点很小，但是它的作用很大。最直接的就是在 path='/' 上设置exact，但是其他的一些特殊情况也需要注意。所以只在 path='/' 增加此属性就能解决问题，这句话有时候是正确的。所以最暴力的方法就是所有 route默认为 true。当然我们应该知道为什么这么做。

好了，本文就到这里，如果有理解不正确的地方还请斧正。