React-Router aktive Klasse funktioniert nicht für verschachtelte Routen

Ich habe mehrere github Probleme und ähnliche Beiträge angesehen, und ich kann das nicht herausfinden. Ich habe hier meine Routen:React-Router aktive Klasse funktioniert nicht für verschachtelte Routen

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

Hier sind die Links von Interesse:

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

Die Links Last ganz gut, aber sie bekommen nie die aktive Klasse CSS. Nur die erste Route unter Last bekommt es und sonst nichts. Hat jemand Ideen?

Quelle

2016-07-09 minifigmaster125

Durch erste Route meinen Sie '/ user/home' oder ''/''? –

/user/home, oder die Route in der URL, wenn ich die Seite aktualisiere – minifigmaster125

Also, es ist schon eine Weile her, seit diese Frage gestellt wurde, aber ich herausgefunden, die Antwort, damit ich es teilen sollte.

In meinem Container, der die Komponente rendert und die Statusaktualisierungen für die Navigation empfängt, musste ich {pure: false} in der Verbindungsfunktion setzen. Im Wesentlichen hängt das mit der Tatsache zusammen, dass, wenn Ihre Komponente nicht "rein" ist (Updates kommen nur von Requisiten), sie auf reactive context angewiesen ist, um sie erneut zu rendern. Hier ist der Code-Block:

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

Dokumentation für die Ausgabe: https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md

Die Frage, die mir geholfen, es zu lösen: https://github.com/ReactTraining/react-router/issues/3286

Quelle

2016-12-04 19:18:26 minifigmaster125

Danke. War im Begriff, die gleiche Frage zu stellen, als ich auf deine stolperte. –

Statt onEnter könnten Sie componetDidMount

Die helle Seite hier verwenden, ist, dass Sie es auch mit componentWillUnmount um Timer beispielsweise entfernen können oder Cache löschen.

Ich hoffe, das hilft, hier einige zusätzliche Informationen zu diesem Thema :) https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

Quelle

2016-07-09 14:55:31

Ist es mit dieser Frage verbunden? –

Ja, anstelle der Verwendung von ActiveClass, die er erwähnt, die Probleme hat, kann er direkt ComponentDidMount() -Methode in jeder Komponente verwenden und er wird genau wissen, was von wo geladen, plus die Option, jeden Code, den er aktiviert hat. –

Aber das Problem ist, OnEnter sollte absolut keine Auswirkungen auf die ActiveClass-Deklaration haben. – minifigmaster125

React-Router aktive Klasse funktioniert nicht für verschachtelte Routen

Antwort

Verwandte Themen