react路由---navlink解决首页路由高亮重复匹配问题

Posted 2021-09-07 老张在线敲代码

这是app.js

  		  <Route exact path="/" component={Home} />
          <Route path="/underway" component={UnderWay} />
          <Route path="/end" component={End} />
          <Redirect to="/"></Redirect>

页面中

<NavLink to="/" >正在空投</NavLink>
<NavLink  to="/underway">即将空投</NavLink>
<NavLink  to="/end" >空投结束</NavLink>

现在的效果（首页高亮重复匹配）

解决方法：后来发现react官网中navlink标签上面也是可以加exact精准匹配的

app.js中没变
页面中使用

 <NavLink exact to="/" >正在空投</NavLink>
 <NavLink  to="/underway">即将空投</NavLink>
 <NavLink  to="/end" >空投结束</NavLink>