web-dev-qa-db-fra.com

<BrowserRouter> ignore l'historique prop

J'utilisais le code suivant d'un cours en ligne pour le routage React:

import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render(
  <Router history={browserHistory}>
     <Route path="/" component={App></Route>
     <Route path="/One" component={One}></Route>

     <Route path="/Two" component={Two}></Route>
  </Router>, document.getElementById('root'));

Cela m'a donné une erreur suivante 'react-router' does not contain an export named 'browserHistory'.

J'ai fait des recherches et découvert que j'utilisais React Router v4 et que le code ci-dessus était destiné à la v3. J'ai donc constaté que je devrais utiliser <BrowserRouter> au lieu de <Router>.

import { BrowserRouter, Route, Switch } from 'react-router-dom';

ReactDOM.render(
   <BrowserRouter history={History}>

     <div> 
    <Route path="/" component={App}></Route>

    <Route path="/One" component={One}></Route>

    <Route path="/Two" component={Two}></Route>


    <Route path="*" component={NoMatch}></Route>

  </div></BrowserRouter>, document.getElementById('root'));

Histoire que j'ai dans un fichier séparé:

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

Maintenant, la page se charge sans erreur, mais si j'utilise les outils de développement, un avertissement s'affiche:

Warning: <BrowserRouter> ignores the history prop. To use a custom history, use `import { Router }` instead of `import { BrowserRouter as Router }`."

Un autre problème est que <Route path="*" component="NoMatch}></Route> n'est censé charger le composant NoMatch que si aucun chemin d'accès n'est spécifié dans le routeur, mais qu'il se charge sur chaque page, indépendamment de ..____.

javascriptreactjsreact-router
5
Coding Duchess

Je suppose que vous utilisez react-router v4 

Premièrement, au lieu de <BrowserRouter>, utilisez <Router> 

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

Vous pouvez accéder aux propriétés de l'objet history en utilisant <withRouter> comme mentionné Ici

Exportez le composant en utilisant <withRouter>, quelque chose comme: 

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class SomeComponent extends Component {
render() {}
}
export default withRouter(SomeComponent);

Deuxièmement, vous pouvez utiliser <Switch> car il restitue le premier enfant <Route> ou <Redirect> qui correspond à l'emplacement

Et vous pouvez envelopper un <Switch> dans un <div> comme ceci: 

   <Router>
      <div> 
        <Switch>
         <Route path="/" component={App}></Route>
         <Route path="/One" component={One}></Route>
         <Route path="/Two" component={Two}></Route>
         <Route component={NoMatch}></Route>
        </Switch>
      </div>
   </Router>

NOTE: La dernière route n'a pas path="*"

Vous pouvez en savoir plus sur <Switch> sur ReactTraining Github

Si vous voulez en savoir plus sur React Router V4 ou <withRouter>, vous pouvez lire ceci Medium Article

3
Aaqib

Vous ne pouvez utiliser que history avec <Router> d'où le message d'erreur. Voir l’API dans la barre latérale de la documentation de react-router.

Routeur de navigateur

<BrowserRouter>
 basename: string
 getUserConfirmation: func
 forceRefresh: bool
 keyLength: number
 children: node

Routeur

<Router>
 history: object
 children: node

https://reacttraining.com/react-router/web/api/Router/history-object

Comme pour le non-correspondance, vous avez besoin d'un commutateur et de mettre le dernier composant sans chemin. En ce moment, vous saisissez chaque itinéraire avec path="*"

Encore une fois, voir docs https://reacttraining.com/react-router/web/example/no-match

<Switch>
  <Route path="/" exact component={Home}/>
  <Redirect from="/old-match" to="/will-match"/>
  <Route path="/will-match" component={WillMatch}/>
  <Route component={NoMatch}/>
</Switch>
0
andrewgi