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

Question

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 toutefois lorsque j'actualise la page ou que je vais manuellement à cette URL.

Answer 1

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.

Answer 2

C'est parce qu' react-redux connect méthode implémente shouldComponentUpdate qui n'entraînent pas à afficher les accessoires n'ont pas changé. Et ce n'est pas en conflit avec maintenant réagir-routeur 4.

Pour éviter cela, vous pouvez passer {pure: false} de connect comme décrit dans réagissent-redux section dépannage.

Une autre façon est d'utiliser des withRouter HOC ou à passer à l' location prop comme décrit dans les DOCS.

Answer 3

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 changé le conteneur navbar de PureComponent à Component , le problème a été résolu pour moi.

Answer 4

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.