React router change l'url mais pas la vue

Vous devez spécifier l'attribut exact pour votre indexRoute, sinon pour même /details route il reste toujours le match avec / . Essayez aussi d'importer Routereact-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'))

mise à jour:

une Autre chose que vous devez faire est d'attacher votre utilisation de composants avec withRouter. Vous avez besoin de faire usage de withRouter seulement si votre composant ne reçoit pas le Router props,

cela peut se produire dans les cas où votre composant est enfant imbriqué d'un composant rendu par le routeur ou vous n'avez pas transmis le Routeur accessoires ou quand le component n'est pas du tout lié au routeur et est rendu comme un component séparé des Routes.

Chez Les Utilisateurs.js ajouter

import {withRouter} from 'react-router}

...
export default withRouter(Users)

DOCS

vous devez ajouter exact à la route de l'index et plutôt que de les enfermer Route composants par des div, utilisez Switch de react-router-dom pour passer d'une route à l'autre.

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

j'ai rencontré des problèmes aussi.

https://github.com/chengjianhua/templated-operating-system

et j'ai essayé les solutions proposées par Shubham Khatri, mais ça ne marche pas.

j'ai résolu ce problème, peut-être peut vous aider.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

selon le guide ci-dessus, lorsque vous utilisez PureComponent ou utiliser avec des outils de gestion d'état comme redux,mobx ... Il peut bloquer la mise à jour de votre itinéraire. Vérifiez votre élément de route, assurez-vous que vous n'avez pas bloqué le rerender od votre composant.

Essayez ceci,

import React from "react";

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


import Details from "./components/Details";

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

vous devriez vérifier ceci: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

par conséquent ce n'est certainement pas Users ou Details, parce qu'ils sont directement rendus par <Route> et location adopté props.

je me demande, Pourquoi avez-vous besoin de la <div> entre <BrowserRouter> et <Route>? Retirez et laissez-moi savoir si cela fonctionne.

Hmm il pas de n'importe quel COMMUTATEUR de réellement changer de vue.

voici comment j'utilise router pour passer de la page landin au site principal

//index.jsx    
ReactDOM.render( (<BrowserRouter><App/></BrowserRouter>), document.getElementById('root') );


//App.jsx
render()
{
    return <div>
        <Switch>
            <Route exact path='/' component={Lander}/>
            <Route path='/vadatajs' component={Vadatajs}/>
        </Switch>
    </div>
}

https://jsfiddle.net/Martins_Abilevs/4jko7arp/11/

https://fiddle.jshell.net/terda12/mana88Lm/

peut-être la clé de la solution est Aiden en ligne pour la fonction principale de rendu ..

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.getElementById('container'));
});

j'ai eu le même problème avec Réagissent Routeur version 4:

En cliquant sur <Link /> composant, URL allait changer mais les points de vue ne serait pas.

l'Un des points de vue a l'aide de PureComponent plutôt que Component (importé de react) et c'était la cause.

en remplaçant tous les composants rendus route qui utilisaient PureComponentComponent, mon problème a été résolu.

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

Vous avez juste à envelopper les composants à l'intérieur de withRouter.

< Route exacte path="/mypath" composant={ withRouter(Moncomposant)} />

Voici un exemple d'Application.fichier 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;

OR

Vous pouvez aussi peut-être placer le composant dans withRouter avant de l'exporter, mais vous devez vous assurer quelques autres choses.

export default withRouter(Profile)