React-route-exact属性

React-Route-exact属性

1.一般情况下react中Route匹配会匹配所有path中含有匹配条件(to属性值)的路由。此处匹配条件一般指的是Link标签中的to属性或Redirect标签中的to属性值。
如下情况：

<Route path='/'  component={Home} />
<Route path='/index' component={Index} />

当有个Link标签为

<Link  to='/'  />

此时因为path=’/index’中含有 匹配条件 ‘/’所以也会被渲染，所以此时会同时渲染Home和Index组件。这样就会对我们的项目造成一定的影响，此时就可以使用exact属性来解决这个问题。

2.exact 为Route中的一个属性，属性值为boolean值，当为true时，表示此路由为严格匹配，为false时为正常匹配(上述情况)。严格匹配的话，就必须path属性与条件(to属性)必须完全相同，才会渲染。
所以解决上述问题直接：

<Route  path='/'  exact    component={Home} />
<>Route  path='/index'  component={Index} />

即可。