React-Router活動類不適用於嵌套路由

Question

我看過幾個github問題和類似的帖子，我無法弄清楚這一點。 我在這里有我的路線：

  <Router history={browserHistory}> <Route path='/' component={Main}> <IndexRoute component={Landing} /> <Route path='login' component={LoginContainer} /> <Route path='user' component={UserContainer} onEnter={checkAuth} > <Route path='home' component={HomeContainer} /> <Route path='settings' component={SettingsContainer} /> <Route path='doc_attributes' component={AttributesContainer} /> <Route path='groups' component={GroupsContainer} /> <Route path='rules' component={RulesContainer} /> </Route> <Route path='/dropbox/auth_finish' onEnter={doDropbox} /> <Route path='/box/auth_finish' onEnter={doBox} /> <Route path='/googledrive/auth_finish' onEnter={doGDrive} /> <Route path='/onedrive/auth_finish' onEnter={doOneDrive} /> </Route> </Router> 

以下是感興趣的鏈接：

 <li><Link to='/user/home' activeClassName="activeLink"><i className="fa fa-home fa-3x fa-fw" aria-hidden="true"></i></Link></li> <li><Link to='/user/settings' activeClassName="activeLink"><i className="fa fa-wrench fa-3x fa-fw" aria-hidden="true"></i></Link></li> <li><Link to='/user/groups' activeClassName="activeLink"><i className="fa fa-users fa-3x fa-fw" aria-hidden="true"></i></Link></li> <li><Link to='/user/rules' activeClassName="activeLink"><i className="fa fa-tasks fa-3x fa-fw" aria-hidden="true"></i></Link></li> 

鏈接加載很好，但它們永遠不會獲得活動類CSS。 只有負載上的第一條路線才能獲得它而沒有別的東西。 有人有什么想法嗎？

Answer 1

而不是onEnter你可以使用componetDidMount

這里的好處是你也可以將它與componentWillUnmount一起使用，以便刪除定時器或清除緩存。

我希望這有幫助，這里有一些關於這個主題的額外信息:) https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

Answer 2

所以，問這個問題已經有一段時間了，但我想出了答案，所以我應該分享一下。

在我的容器中呈現組件並接收導航的狀態更新，我需要在連接函數中放置{pure: false} 。 本質上它與如下事實有關：如果你的組件不是“純粹的”（更新只來自props），那么它依賴於反應上下文來重新渲染。 這是代碼塊：

const NavContainer = ReactRedux.connect( MapStateToProps, MapDispatchToProps, null, {pure: false} )(Nav)

該問題的文檔： https ： //github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md

幫助我解決問題的問題： https ： //github.com/ReactTraining/react-router/issues/3286