react-router页面刷新之后嵌套路由找不到的坑

版权声明：如有转载，请注明出处~ https://blog.csdn.net/weixin_38080573/article/details/88553424

刷新之后嵌套路由找不到

最近遇到一个react路由配置的一个小坑，在复杂web应用过程中坑定都是需要配置嵌套路由来实现单页应用。
但发现，在嵌套路由的某个子页面中刷新页面，会找不到和当前路由匹配的单页。
后来发现是匹配中都是严格模式匹配，导致嵌套路由匹配不上。
代码如下：

 <Route exact path='/' component={Home} />
 <Route exact path='/home' component={Home} />
 <Route exact path='/download' component={DownLoad} />
 <Route exact path='/myLearn' component={MyLearn} />
 <Route exact path='/my' component={My} />

而在 MyLearn组件中又会配置若干个嵌套路由。
在嵌套路由中刷新页面，会出现下面这种情况，刷新前：

刷新后：

原因就是上图红色注释部分导致的。
解决如下：
在App.js中的路由配置，将MyLearn由 严格匹配改为贪婪匹配（即去掉exact属性）即可

这样在刷新MyLearn中的子页面，嵌套路由会贪婪匹配到 /my/Learn，会先将MyLearn组件渲染出来，MyLearn组件渲染出来，那么在该组件中配置的嵌套路由也会被识别出来，就会精确匹配到嵌套路由了。