web-dev-qa-db-fra.com

React le routeur modifie l'URL mais ne visualise pas

J'ai du mal à changer la vue en réaction avec le routage. Il semble que j'ai essayé tout ce que je peux google sans succès. Je souhaite uniquement afficher une liste d'utilisateurs. Un clic sur chaque utilisateur doit permettre d'accéder à 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/les détails, mon navigateur accède à cette URL, mais ne modifie pas la vue. Toute autre route jette 404, donc il semble reconnaître la route mais pas la mettre à jour.

reactjsreact-router
37
MARyan87

Vous devez spécifier l'attribut exact pour votre indexRoute, sinon pour même /details route il va toujours correspondre avec /. 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'))

MISE À JOUR:

Une autre chose à faire est d’attacher vos utilisateurs du composant avec withRouter. Vous ne devez utiliser withRouter que lorsque votre composant ne reçoit pas le Router props,

Cela peut arriver dans les cas où votre composant est un enfant imbriqué d'un composant rendu par le routeur ou si vous n'avez pas t lui a transmis les accessoires du routeur ou lorsque le composant n’est pas lié au routeur et est rendu en tant que composant distinct des itinéraires.

Dans Users.js, ajoutez

import {withRouter} from 'react-router';

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

DOCS

29
Shubham Khatri

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

<Composant exact de la route = "/ mypath" composant = {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;

OU

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

export default withRouter(Profile)
14
Coding Elements

Lors de l'utilisation de Redux, des problèmes similaires se produisaient. L'URL était mis à jour dans la barre d'adresse, mais l'application ne chargeait pas le composant respectif. J'ai pu résoudre en ajoutant withRouter à l'exportation:

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

export default withRouter(connect(mapStateToProps)(MyComponentName))
6
Bruce Seymour

Vous devez ajouter exact à la route d'index et au lieu de renfermer ces composants Route par 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'))
2
Vinay J Rao

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

En cliquant <Link /> _ composant, l'URL changerait mais les vues ne changeraient pas.

L'une des vues utilisait PureComponent plutôt que Component (importé de react) et c'était la cause.

En remplaçant tous les composants de rendu de route qui utilisaient PureComponent en Component, mon problème a été résolu.

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

1
Kunok

J'ai eu un problème similaire avec une mise en page conditionnelle:

class LayoutSwitcher extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn
    return (
      <React.Fragment>
        { isLoggedIn
          ? <MainLayout {...this.props} />
          : <Login />
        }
      </React.Fragment>
    )
  }
}

et réécrit les conditions comme suit:

  render () {
    const isLoggedIn = this.props.isLoggedIn
    if (isLoggedIn) {
      return <MainLayout {...this.props} />
    }
    return <Login />
  }

Cela l'a résolu. Dans mon cas, il semble que le contexte ait été perdu.

0
sym

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 ni Details, car ils sont directement rendus par <Route>, et le location sera passé à props.

Je me demande pourquoi vous avez besoin du <div> entre <BrowserRouter> et <Route>? Supprimez cela et laissez-moi savoir si cela fonctionne.

0
yuji

J'étais confronté à un problème similaire, je suis résolu à aimer ceci s'il vous plaît jeter un oeil j'espère que cela fonctionne.

Vous devez utiliser la fonction composantWillReceiveProps dans votre composant.

cliqué sur un lien pour la première fois en appelant l'URL www.example.com/content1/ composantDidMount () est exécuté.

Maintenant, lorsque vous cliquez sur un autre lien, déclarez que www.example.com/content2/ le même composant est appelé, mais que cette propriété change et que vous pouvez accéder à cette nouvelle propriété sous composantWillReceiveProps (nextProps) que vous pouvez utiliser pour appeler l'API ou vider l'état et obtenir le nouveau Les données.

componentWillReceiveProps(nextProps){
     //call your API and update state with new props
}
0
Sanat Gupta

J'ai eu un problème similaire mais avec une structure différente. J'ai ajouté un routeur qui gérera tous les itinéraires. J'ai utilisé le composant Switch pour changer de vue. Mais en réalité, ça n'a pas été le cas. Seule l'URL a changé mais pas la vue. La raison en était le composant Link utilisé dans le composant SideBar, qui se trouvait en dehors du composant Router. (Oui, j'ai exporté SideBar avec "withRouter", non travaillé). La solution consistait donc à déplacer mon composant SideBar qui contient tous les composants Link dans mon routeur.

Le problème est dans mes linkers, ils sont en dehors de mon routeur

<div className="_wrapper">
  <SideBar /> // Holds my all linkers
  <Router>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
 </div>

La solution déplaçait mes linkers dans mon routeur

<div className="_wrapper">
  <Router>
     <SideBar /> // Holds my all linkers
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
</div>
0
Yusufbek

Hmm il n'y a pas de SWITCH pour réellement changer de vue.

voici comment j'utilise un routeur pour passer de la page de 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/

ups j'ai trouvé que vous utilisez routeur différent .. désolé alors peut-être ce violon être pour vous utile

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

peut-être que la solution est cachée dans la ligne pour la fonction de rendu principale ..

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

Essaye ça,

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'))
0
Vaibhav Singh

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 peut-être 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 avec des outils de gestion d'état tels que redux, mobx ..., la mise à jour de votre itinéraire peut être bloquée. Vérifiez votre composant de route, assurez-vous que vous n'avez pas bloqué le render od votre composant.

0
Jianhua Cheng