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