La propriété `history` est marquée comme requise dans `Router`, mais sa valeur est `undefined`. dans Router

Question

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(

, document.getElementById('app'));

et le compiler avec webpack. J'ai également ajouté le composant Main à mes alias. La console affiche ces erreurs : J'ai également lu ces liens :

React Router failed prop 'history', is undefined

How do I resolve history is marked required, when value is undefined?

Upgrading React-Router and replacing hashHistory with browserHistory

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

Answer 1

Si vous utilisez react-router v4, vous devez également installer react-router-dom. Ensuite, importez BrowserRouter de react-router-dom et remplacez Router par 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((

     ),
     document.getElementById('root')
);

Source

Answer 2

Quelle version de React Router utilisez-vous? La version 4 a changé de la classe browserHistory à l'instanciation de browserHistory, consultez l'exemple de code dans les nouvelles docs.

Cela a pris beaucoup de personnes au dépourvu en cas de mise à niveau automatique; un document de migration sortira 'très bientôt'.

Vous devez ajouter ceci en haut:

import { createBrowserHistory } from 'history'

const newHistory = createBrowserHistory();

et

Answer 3

Si vous souhaitez avoir plusieurs routes, vous pouvez utiliser switch comme ceci,

import {Switch} from 'react-router'; 

ensuite

Answer 4

J'ai rencontré le même problème en ES6, mais lorsque j'ai commencé à utiliser la bibliothèque 'react-router-dom', le problème a été résolu. Pour tous les fans de ES6, voici :

npm install --save react-router-dom

Dans index.js :

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

ReactDOM.render(

  ,
  document.getElementById('root')
);

Answer 5

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