La propiedad `history` está marcada como requerida en` Router`, pero su valor es ʻundefined`. en el enrutador

Soy nuevo en ReactJs. Este es mi codigo:

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

y compilarlo con webpack. También agregué el componente principal a mis alias. La consola arroja estos errores: también leo estos enlaces:

React Router falló el prop 'historial', no está definido

¿Cómo resuelvo que el historial está marcado como obligatorio, cuando el valor no está definido?

Actualizar React-Router y reemplazar hashHistory con browserHistory

y muchas búsquedas en la web, pero no pude solucionar este problema. React Router es la versión 4

Si está utilizando react-router v4, también debe instalar react-router-dom. Después de eso, importe BrowserRouter desde react-router-dom y cambie Router por BrowserRouter. Parece que la v4 cambia varias cosas. Además, la documentación de react-router está desactualizada. Este es mi código de trabajo:

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

Fuente

¿Qué versión de React Router estás usando? La versión 4 del enrutador cambió de pasar la clase browserHistory a pasar una instancia de browserHistory, vea el ejemplo de código en los nuevos documentos .

Esto ha atrapado a muchas personas que se actualizan automáticamente; un documento de migración saldrá "en cualquier momento".

Quieres agregar esto a la parte superior:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

y

<Router history={newHistory}/>

Si desea tener varias rutas , puede usar un interruptor como este,

import {Switch} from 'react-router'; 

entonces

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

Tuve el mismo problema en ES6, pero cuando cambié para usar la biblioteca 'react-router-dom', el problema se resolvió. Para todos los fanáticos de ES6, aquí vamos:

npm install --save react-router-dom

En index.js:

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

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

La versión 4 de React Router cambió varias cosas. Hicieron elementos de enrutador de nivel superior separados para los diferentes tipos de historia. Si está utilizando la versión 4, debería poder reemplazarla <Router history={hashHistory}>con <HashRouter>o <BrowserRouter>.
Para obtener más detalles, consulte https://reacttraining.com/react-router/web/guides

También escribo una práctica de inicio de sesión. Y también cumplir con la misma pregunta que tú. Después de un día de lucha, descubrí que solo this.props.history.push('/list/')puedo lograrlo en lugar de incorporar muchos complementos. Por cierto, la react-router-domversión es ^4.2.2. ¡Gracias!

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);
        }
    })
}

Lo siguiente me funciona con "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')
)