09月10, 2016

React IndexRoute always active

直接在代码中添加:

<li><NavLink to="/">Home</NavLink></li>

这时候home标签会一直高亮显示,即一直处于active状态不回改变,即使切换路由,如下图所示:

alt

[x] 官方给出的原因时这样的:

Now navigate around. Notice anything weird? The link to Home is always active! As we learned earlier, parent routes are active when child routes are active. Unfortunately, / is the parent of everything.

For this link, we want it to only be active when the index route is active. There are two ways to let the router know you're linking to the "index route" so it only adds the active class (or styles) when the index route is rendered.

####这两段话表明,是所有路由的父亲。

解决方案1:

因此,需要如下代码(解决方案):

// App.js
import { IndexLink } from "react-router"

// ...
  • Home
  • 来指定这就是首页,如下图可以看到这样直有在首页被点击的时候会有active状态:

    alt

    解决方案2:

    还是那句话,如果我非要使用我封装好的link(我这里为<NavLink/>),使用方法如下,在component中添加一个属性

    onlyActiveOnIndex={true} 这样就会发现,home中的路由只有在点击之后出现相应activeclass高亮,效果如下图所示:

    点击HOME,两个都高亮

    alt

    点击About只有About高亮

    alt

    summary

    个人感觉还是方案1比较合适,因为可以直接在标签上区别Index/Home(首页)还是其他页面,并且不需要额外添加其他属性!

    本文链接:https://beacelee.com/post/react-indexroute-always-active.html

    -- EOF --

    Comments

    评论加载中...

    注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。