React router change l'url mais pas la vue

Question

J'ai du mal à changer la vue dans react avec le routage. Je veux seulement montrer une liste d'utilisateurs, et en cliquant sur chaque utilisateur, je dois naviguer vers une page de détails. Voici le routeur :

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

Lorsque j'utilise l'url /details, mon navigateur navigue vers cette url, mais ne change pas l'affichage. Toute autre route produit un résultat de 404, il semble donc reconnaître la route mais pas la mise à jour.

Answer 1

Vous devez spécifier l'attribut exact pour votre indexRoute, sinon pour même /details il correspondra toujours à / . Essayez également d'importer Route de react-router-dom

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route exact path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

UPDATE :

Une autre chose que vous devez faire est d'attacher votre composant Users avec withRouter . Vous devez utiliser withRouter uniquement lorsque votre composant ne reçoit pas le Router props ,

Cela peut se produire dans les cas où votre composant est une enfant imbriqué d'un composant rendu par le routeur o vous ne lui avez pas passé les props Router ou lorsque le composant n'est pas du tout lié au routeur et qu'il est rendu comme un composant distinct des routeurs.

Dans Users.js, ajoutez

import {withRouter} from 'react-router';

.........
export default withRouter(Users)

DOCS

Answer 2

Il suffit d'envelopper les composants dans avecRouter .

<Route exact path="/mypath" component={withRouter(MyComponent)} />

Voici un exemple de fichier App.js :

...
import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={withRouter(Home)} />
          <Route exact path="/profile" component={withRouter(Profile)} />
        </Switch>
      </Router>
    );
  }
}

export default App;

Supplémentaire

Si vous utilisez un routeur de réaction, composantWillReceiveProps sera appelé à chaque fois que l'url change.

componentWillReceiveProps(nextProps) {
    var currentProductId = nextProps.match.params.productId;
    var nextProductId = nextProps.match.params.productId; // from the new url
    ...
}

Note

Alternativement, vous pouvez également envelopper le composant dans avecRouter avant l'exportation, mais vous devez ensuite vous assurer de quelques autres choses. Je saute généralement cette étape.

export default withRouter(Profile)

Answer 3

En utilisant Redux et j'ai eu des problèmes similaires où l'url se mettait à jour dans la barre d'adresse mais l'application ne chargeait pas le composant respectif. J'ai pu résoudre ce problème en ajoutant withRouter à l'exportation :

import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

export default withRouter(connect(mapStateToProps)(MyComponentName))

Answer 4

Vous devez ajouter des données exactes à la route de l'index et, plutôt que d'entourer ces données Route par div, utilisez Interrupteur de react-router-dom pour basculer entre les routes.

import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <div>
    <Switch>
        <Route path="/" component={Users} exact/>
        <Route path="/details" component={Details} />
    </Switch>
  </div>
), document.getElementById('app'))

Answer 5

J'ai eu un problème similaire avec React Router version 4 :

En cliquant <Link /> l'URL change mais pas les vues.

L'un des points de vue était d'utiliser PureComponent plutôt que Component (importé de react ) et c'était la cause.

En remplaçant tous les composants rendus par route qui utilisaient PureComponent a Component mon problème a été résolu.

(Source de la résolution : https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785 )