react-router - 链接主页上的 activeClassName

IT技术 reactjs react-router
2021-05-16 03:21:22

我在链接上react-router 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 在此链接上工作,但也在主页链接中“/”。

不知道有没有人有同样的问题。

谢谢 !

1个回答

因为你已经习惯<IndexRoute component={Home} />了渲染 home 组件。

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

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

有了这个(Home)链接,当我们处于索引路线时,它才会“活跃”。