这段时间正在研究 react router4 ，发现了其中一个很特别的属性。因为没有系统的看过官方的文档，所以在这里也频繁的踩坑。在网上也看过很多文章，结果还是踩坑。现在终于把坑踩平了，今天就把这个小小的知识点记录下来。加深一下理解。
作用
这个属性干嘛的呢？
直接翻译就知道他的意思是精确的意思，那他的作用是什么呢？
看下面这段代码：这是 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。当然我们应该知道为什么这么做。
好了，本文就到这里，如果有理解不正确的地方还请斧正。
