react-router的使用——NavLink的使用Switch的作用Redirect

Posted 2022-02-17 小小白学计算机

一、NavLink的使用

需求：路径选中时，对应的a元素变为红色
这个时候，我们要使用NavLink组件来替代Link组件：

• activeStyle：活跃时（匹配时）的样式；
• activeClassName：活跃时添加的class；
• exact：是否精准匹配；

但是，我们会发现在选中about或profile时，第一个也会变成红色：

• 原因是/路径也匹配到了/about或/profile；
• 这个时候，我们可以在第一个NavLink中添加上exact属性；
  

默认的activeClassName：

• 事实上在默认匹配成功时，NavLink就会添加上一个动态的active class；
• 所以我们也可以直接编写样式
  

当然，如果你担心这个class在其他地方被使用了，出现样式的层叠，也可以自定义class

二、Switch的作用

我们来看下面的路由规则：

• 当我们匹配到某一个路径时，我们会发现有一些问题；
• 比如/about路径匹配到的同时，/:id也被匹配到了，并且最后的一个NoMatch组件总是被匹配到；
  
  原因是什么呢？默认情况下，react-router中只要是路径被匹配到的Route对应的组件都会被渲染；
• 但是实际开发中，我们往往希望有一种排他的思想：
• 只要匹配到了第一个，那么后面的就不应该继续匹配了；
• 这个时候我们可以使用Switch来将所有的Route进行包裹即可；

三、Redirect

Redirect用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中：

我们这里使用这个的一个案例：

• 用户跳转到User界面；
• 但是在User界面有一个isLogin用于记录用户是否登录：
  true：那么显示用户的名称；
  false：直接重定向到登录界面；