reactjs - una - validar null o undefined javascript

El prop `history` está marcado como requerido en` Router`, pero su valor es `undefined`. en el enrutador

Question

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 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?

Actualización de React-Router y reemplazo de hashHistory con browserHistory

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

Answer 1

¿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 atrapado a muchas personas que actualizan automáticamente; un documento de migración saldrá ''cualquier día ahora''.

Desea agregar esto al principio:

import createBrowserHistory from ''history/createBrowserHistory''
const newHistory = createBrowserHistory();

y

<Router history={newHistory}/>

Answer 2

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

Answer 3

Lo siguiente funciona para mí 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'')
)

Answer 4

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>

Answer 5

Si está utilizando react-router v4, también necesita instalar react-router-dom. Después de eso, importe BrowserRouter desde react-router-dom y cambie Router por BrowserRouter. Parece que 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'')
);

Source

Answer 6

También escribo una práctica de inicio de sesión. Y también cumplir con la misma pregunta como tú. Después de un día de lucha, descubrí que solo this.props.history.push(''/list/'') puede funcionar en lugar de this.props.history.push(''/list/'') muchos complementos. Por cierto, la versión react-router-dom 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);
}
})
}

Answer 7

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