reactjs - React 路由器 - 链接主页上的 activeClassName

Question

我在链接上 react 路由器 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} />渲染 home 组件。

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

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

这样，这个 (Home) 链接只有在我们位于索引路线时才会“事件”。