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} />
即可。