0
318
ViewsEl prop `history` está marcado como requerido en `Router`, pero su valor es `indefinido`. en enrutador
Soy nuevo en ReactJs. Este es mi código:
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 compilándolo con webpack. También agregué el componente principal a mis alias. La consola arroja estos errores: 
También leí 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
3 answers
Answer question0
Si está utilizando react-router v4, también debe instalar react-router-dom. Después de eso, importa BrowserRouter desde react-router-dom y cambia Router por BrowserRouter. Parece que la v4 cambia varias cosas. Además, la documentación del enrutador de reacción 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') );0
¿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, consulte el ejemplo de código en los nuevos documentos .
Esto ha estado atrapando a muchas personas que actualizan automáticamente; un documento de migración saldrá 'en cualquier momento'.
Desea agregar esto a la parte superior:
import { createBrowserHistory } from 'history' const newHistory = createBrowserHistory();y
<Router history={newHistory}/>0
Si desea tener múltiples 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>