React 路由器 - Link 主页上的 activeClassName

Question

我对 Link 上的 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>
    );

问题是，当我在 link 上举例时，activeClassName 在这个 link 上工作，但也在家 link 上工作 '/'。

不知道有没有人遇到同样的问题

谢谢！

Answer 1

因为您已经使用 <IndexRoute component={Home} /> 渲染主页组件。

您应该使用 IndexLink 为主页提供link

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

有了这个 ( Home ) link 将只有 "active" 当我们在索引路线时。

React 路由器 - Link 主页上的 activeClassName

React router - activeClassName on Link home

reactjs

react-router