web-dev-qa-db-fra.com

Réagissez le routeur 4 ne met pas à jour la vue sur le lien, mais le fait sur l'actualisation

J'utilise le code de navigation simple suivant

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>
</Router>

<NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

<NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

L'URL change mais la vue ne change pas. Cela change cependant lorsque j'actualise la page ou que je vais manuellement à cette URL.

reactjsurlreact-routerreact-router-v4
29
ilyo

Vous pouvez également utiliser le:

import { withRouter } from 'react-router-dom';

Et puis sur votre défaut d'exportation, vous faites comme ceci:

export default withRouter(connect(mapStateToProps, {})(Layout));

Parce que lorsque vous avez une connexion d'exportation, vous devez indiquer que ce composant utilisera le routeur.

37
daminufe

En effet, la méthode react-reduxconnect implémente shouldComponentUpdate, ce qui entraînera le rendu du composant not lorsque les accessoires ne sont pas modifiés. Et ceci est en conflit maintenant avec react-router 4.

Pour l'éviter, vous pouvez passer de {pure: false} à connect comme décrit dans la section de dépannage de react-redux .

Une autre méthode consiste à utiliser withRouter HOC ou à transmettre location prop comme décrit dans DOCS .

26
Tomasz Mularczyk

J'avais mes liens Navlinks dans un composant sans état (ou composant muet) et un conteneur pour contrôler l'état d'effondrement de ma barre de navigation. 

après avoir basculé le conteneur navbar de PureComponent à Componentit, le problème a été résolu pour moi.

5
Tom Schinelli

J'ai rencontré ce problème. Je le résous en ajoutant la clé d'attribut au composant. Le commutateur avec la valeur est un chemin d'accès et une recherche d'emplacement.

0
TDQ