反应路由器 - 链接主页上的 activeClassName [英] React router - activeClassName on Link home

问题描述

我在链接上反应路由器 activeClassName 时遇到问题.

返回 (<div className="导航"><ul><li><链接到={'/'} activeClassName="active">家</链接><li><Link to={'about'} activeClassName="active">关于</链接><li><Link to={'freebies'} activeClassName="active">免费赠品</链接><li><Link to={'sandbox'} activeClassName="active">沙盒</链接>

);

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

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

谢谢！

解决方案

既然你已经使用了 <IndexRoute component={Home}/> 来渲染 home 组件.

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

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

这样(主页)链接将仅在我们处于索引路线时处于活动状态".

I have a problem with react router activeClassName on Link.

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>
    );

The problem is when i am for exemple on link about, activeClassName work on this link but also in the home link too ' / '.

I don't know if someone have the same issue.

Thank you !

解决方案

Since you have used <IndexRoute component={Home} /> to render home component.

You should use IndexLink to provide link for Home page

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

With that this ( Home ) link will be only "active" when we're at the index route.

这篇关于反应路由器 - 链接主页上的 activeClassName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！