Le prop `history` est marqué comme requis dans` Router`, mais sa valeur est `undefined`. dans le routeur


96

Je suis nouveau sur ReactJs. Voici mon code:

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

et en le compilant avec webpack. J'ai également ajouté le composant principal à mes alias. La console renvoie ces erreurs: j'ai également lu ces liens:

React Router a échoué le prop 'historique', n'est pas défini

Comment résoudre l'historique est marqué comme requis, lorsque la valeur n'est pas définie?

Mise à niveau de React-Router et remplacement de hashHistory par browserHistory

et de nombreuses recherches sur le Web, mais je n'ai pas pu résoudre ce problème. React Router est la version 4

Réponses:


170

Si vous utilisez react-router v4, vous devez également installer react-router-dom. Après cela, importez BrowserRouter depuis react-router-dom et changez Router pour BrowserRouter. Il semble que la v4 change plusieurs choses. De plus, la documentation de react-router est obsolète. Voici mon code de travail:

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

ReactDOM.render((
     <BrowserRouter>
          <Route path="/" component={App}/>
     </BrowserRouter>
     ),
     document.getElementById('root')
);

La source


11
Dans la version 4, lorsque vous utilisez 'react-router-dom', il n'est pas nécessaire d'importer 'react-router'. «react-router-dom» est terminé.
Mammad2c

4
Si j'ai plusieurs balises <Route ...> à l'intérieur de BrowserRouter, j'obtiens cette erreur: "Erreur non interceptée: Un <Router> peut n'avoir qu'un seul élément enfant". Comment réparer?
olefrank

1
@erp react-router-dom a plus d'options que react-router. vous pouvez visiter le document. Mais vous n'en avez utilisé qu'un seul.
Mammad2c

2
@NSCoder non, le routeur est également dans le 'react-router-dom', il n'est donc pas nécessaire d'inclure à la fois 'react-router-dom' et 'react-router'. Si vous avez besoin de 'HashRouter' et 'router' ensemble, vous devez inclure 'react-router-dom'.
Mammad2c

1
@olefrank vous devez envelopper vos multiples <Route...>instructions dans un <switch>wrapper au lieu de les encapsuler <div>. Si vous utilisez <div>, cela rend les routes inclusives, ce qui signifie que si un chemin peut correspondre à deux routes, les deux composants seront rendus. Voir tous les détails ici: medium.com/@djoepramono/react-router-4-gotchas-2ecd1282de65
Muhammad Hannan

17

Quelle version de React Router utilisez-vous? La version 4 du routeur est passée du passage de la classe browserHistory au passage d'une instance de browserHistory, voir l' exemple de code dans la nouvelle documentation .

Cela a attiré de nombreuses personnes qui effectuent une mise à niveau automatique; un document de migration sortira «n'importe quel jour maintenant».

Vous voulez ajouter ceci en haut:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

et

<Router history={newHistory}/>

version 4. Pourriez-vous convertir mon code en version 4, s'il vous plaît?
Mammad2c

où est customHistorydéfini?
SharpCoder

Désolé. mieux maintenant?
Charles Merriam

4

Si vous souhaitez avoir plusieurs itinéraires, vous pouvez utiliser un commutateur comme celui-ci,

import {Switch} from 'react-router'; 

puis

<BrowserRouter>
     <Switch>
         <Route exact path="/" component={TodoComponent} />
         <Route path="/about" component={About} />
     </Switch>
</BrowserRouter>

3

J'ai eu le même problème dans ES6, mais lorsque je suis passé à la bibliothèque «react-router-dom», le problème a été résolu. Pour tous les fans d'ES6, c'est parti:

npm install --save react-router-dom

Dans index.js:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <HashRouter>
        <Route path="/" component={App}/>
    </HashRouter>
  ,
  document.getElementById('root')
);

In index.js:ou In index.jsx:?
Raz Galstyan

@RazGalstyan index.js si vous utilisez webpack.
Teoman shipahi

1

La version 4 de React Router a changé plusieurs choses. Ils ont créé des éléments de routeur de niveau supérieur distincts pour les différents types d'historique. Si vous utilisez la version 4, vous devriez pouvoir remplacer <Router history={hashHistory}>par <HashRouter>ou <BrowserRouter>.
Pour plus de détails, voir https://reacttraining.com/react-router/web/guides


0

J'écris également une pratique de connexion. Et aussi répondre à la même question comme vous. Après une journée de lutte, j'ai trouvé que cela ne this.props.history.push('/list/')pouvait que le faire au lieu de tirer beaucoup de plugins. Au fait, la react-router-domversion est ^4.2.2. Merci!

handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,values)=>{
        if(!err){
            this.setState({
                visible:false
            });
            this.props.form.resetFields();
            console.log(values.username);
            const path = '/list/';
            this.props.history.push(path);
        }
    })
}


0

Ce qui suit fonctionne pour moi avec "react-router@^3.0.5":

package.json:

"react-dom": "^16.6.0",
"react-router": "^3.0.5"

index.js:

import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'

render(
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='*' component={NotFound404} />
    </Router>,
    document.getElementById('root')
)
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.