React router - 在Link home上的activeClassName

Question

我在Link上有反应路由器activeClassName的问题。

return (
      <div className="navigation">
        <ul>
          <li>
            <Link to={'/'} activeClassName="active">
              Home
            </Link>
          </li>
          <li>
            <Link to={'about'} activeClassName="active">
              About
            </Link>
          </li>
          <li>
            <Link to={'freebies'} activeClassName="active">
              Freebies
            </Link>
          </li>
          <li>
            <Link to={'sandbox'} activeClassName="active">
              Sandbox
            </Link>
          </li>
        </ul>
      </div>
    );

问题是，当我在链接上例证时，activeClassName在此链接上工作，但也在主页链接中工作'/'。

我不知道是否有人有同样的问题。

谢谢！

Answer 1

由于您已使用<IndexRoute component={Home} />呈现主页组件。

您应该使用IndexLink为主页提供链接

<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>

这样，当我们在索引路线时，此（主页）链接将仅“有效”。