React exact路由精确匹配

1.功能介绍:

  路由精确匹配时使用,防止匹配错误。例如: to="/" 和 to="/home"如果不给第一个设置精确匹配,匹配到第一个的同时第二个也被匹配。

2.使用方法:

//引入相关组件
import {Route, NavLink} from 'react-router-dom';

//使用
<NavLink to="/react" exact activeStyle={{color:'red'}}>react</NavLink>
<NavLink to="/react" exact activeStyle={{color:'blue'}}>vue</NavLink>

<Route exact path='/react' component={React} />
<Route exact path='/vue' component={Vue} />

3.注意事项:

必须同时在跳转和定义处使用exact

posted @ 2021-06-30 16:32  C元素  阅读(471)  评论(0编辑  收藏  举报