首页 文章

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

提问于
浏览 次
6

我有一个导航组件，呈现每个导航链接。此组件的返回如下所示：

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

javascript reactjs react-router

7 回答

  • 6

    如果没有看到完整的代码就很难调试，但 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>

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

    <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

    回复于
  • 2
    <NavLink
  to="/faq"
  activeClassName="selected"
> FAQs</NavLink>

    从ReactTraining为我做了

    回复于
  • 2

    说明

    • 使用<NavLink>而不是<Link>并将 exact 添加为属性

    • 包含exact作为属性，以确保仅在与您的位置完全匹配的网址路径上触发activeClassName

    例

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

    资源

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

    确切地说：bool

    如果为 true，则仅在位置完全匹配时才应用活动 class/style。

    回复于
  • 1

    有同样的问题！通过withRouter包装父组件解决。 E.g。

    import { withRouter } from 'react-router';

class NavBar extends Component {
    ...
}

export default withRouter(NavBar);
    回复于
  • 0

    我不想升级，因为它导致的问题多于解决的问题。我没有使用 Redux 所以整个连接的东西都不适用。我尝试渲染纯粹和不纯(使用 pure-render 装饰器)没有结果。

    所以我决定手动编写链接处理。我知道这超级详细，但它有效！

    我添加了路由器上下文：

    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 = '';
  }
    回复于
  • 0

    有两个解决方案：

    编辑：您没有使用 Redux，因此第二个解决方案无效。

    回复于
  • 0

    我在 react-router-dom v4.3 遇到了这个问题。我的整个应用程序已经使用 withRouter 包装。我也在使用 react-redux。我注意到它会将类添加到正确的链接。

    const mapStateToProps = (state) => {
return {
    router: state.router,
    location: state.route.location
 }
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)

    我的导航链接看起来像这样

    <NavLink
        exact
        to="/logs"
        className="menu-item"
        activeClassName="selected"
        >
        <i className="st-icon-log-reports" /> logs 
 </NavLink>
    回复于

相关问题