反应路由器链接; activeClassName不起作用

Question

我有一个导航组件,呈现每个导航链接.此组件的返回如下所示:

     return (
        <li key={`nav-list-${el.title}-${index}`}>
          <Link to={{pathname: '/c/' + el.urlkey}}
                activeClassName={s.active}>{el.title}</Link>
          {subNav}
        </li>
      );

活动类仅在页面刷新时设置.单击链接时,活动指示符将保留在初始链接中.

我没有使用Redux,所以它似乎与此问题无关:当点击链接时,activeClassName在sideMenu上不起作用

我的路线看起来像这样:

      <Route path="/c/:category(/:title)" component={CategoryView} name="category" />

使用React-Router 2.8.1和browserHistory

Answer 1

指示

1. 使用<NavLink>代替<Link>并添加精确作为属性

2. exact作为属性包含以确保activeClassName仅在与您的位置完全匹配的 url 路径上触发

例子

<NavLink exact activeClassName="active" to="/path1">
<NavLink exact activeClassName="active" to="/path2">

来源

https://reacttraining.com/react-router/web/api/NavLink/exact-bool

精确：布尔

如果为 true，则仅当位置完全匹配时才会应用活动类/样式。

Answer 2

如果您在这里是因为 activeClassName 根本不起作用。请注意，从 React-router 6 开始，它已被弃用。而是使用 className 作为接受 prop 并返回类名的函数。如

<NavLink className={({isActive}) => isActive ? "active-class": "non-active-class" } > </Navlink>

isActive 是一个布尔值，指示该路由是否是当前路由。

参考：react 路由器文档

Answer 3

如果没有看到完整的代码就很难调试,但React Router的问题activeClassName通常可以解决:

• 确保你有一个IndexLink:

  <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li> <li><Link to="/" activeClassName="active">About</Link></li> <li><Link to="/" activeClassName="active">Contact</Link></li>

• 或者onlyActiveOnIndex在所有上使用该属性Links:

  <li><Link to="/" activeClassName="active" onlyActiveOnIndex>Home</Link></li> <li><Link to="/" activeClassName="active" onlyActiveOnIndex>About</Link></li> <li><Link to="/" activeClassName="active" onlyActiveOnIndex>Contact</Link></li>

这是第二个解决方案的工作演示:http://codepen.io/PiotrBerebecki/pen/qaKqRW

Answer 4

我还不想升级，因为它造成的问题比它解决的问题还要多。而且我没有使用 Redux，所以整个连接的事情不适用。我尝试渲染纯和非纯（使用纯渲染装饰器），但没有结果。

所以我决定手动编写链接处理。我知道它非常冗长，但它有效！

我添加了路由器上下文：

static contextTypes = {
   router: React.PropTypes.object
};

渲染返回：

return (
   <li key={`nav-${el.title}`} className={`${isActiveClass}`}>
     <a onClick={this.state.LinkClick} data-item={urlkey}>{el.title}</a>
   </li>
);

点击处理程序如下所示：

LinkClick(e){
   e.preventDefault();
   const elem = e.currentTarget;
   const item = elem.dataset.item;
   this.context.router.push('/c/'+item);
   this.setState({
     activeLink: item
   });
 }

最后我在渲染中设置了类：

  const activeLink = this.state.activeLink;
  let isActiveClass = '';
  let navLinks = map(availableCategories, (el, index) => {
  const urlkey = el.urlkey;

  // Check the active item on page render
  const isActive = this.context.router.isActive('/c/' + urlkey);

  if(activeLink === urlkey || isActive){
    isActiveClass = s.active;
  } else {
    isActiveClass = '';
  }