反應路由器鏈接; 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

如果沒有看到完整的代碼就很難調試，但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

Answer 2

 <NavLink to="/faq" activeClassName="selected" >FAQs</NavLink> 

來自ReactTraining為我做了這件事

Answer 3

說明

1. 使用<NavLink>代替<Link>並添加exact作為屬性

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

確切地說：bool

如果為true，則僅在位置完全匹配時才應用活動類/樣式。

Answer 4

有同樣的問題！ 通過withRouter包裝父組件withRouter 。 例如

import { withRouter } from 'react-router';

class NavBar extends Component {
    ...
}

export default withRouter(NavBar);

Answer 5

有兩個解決方案：

• 您可以升級到修復此問題的最新穩定版本v3.0.0 （今天發布）。 （見https://github.com/ReactTraining/react-router/issues/3286#issuecomment-220861601 ）
• 從此答案中應用 v2.8.1的修補程序： https ： v2.8.1

編輯：您沒有使用Redux，因此第二個解決方案無效。

Answer 6

我不想升級，因為它導致的問題多於解決的問題。 我沒有使用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 = '';
  }

Answer 7

我在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>