reactjs - you - React Router: no se puede leer la propiedad ''ruta'' de undefined

react routing

Question

Acabo de empezar a aprender React y me quedé atascado en este error.

No se detectó TypeError: no se puede leer la propiedad ''ruta'' de undefined en el nuevo enrutador

Aquí está mi código:

var React = require(''react'');
var ReactDOM = require(''react-dom'');
var { Route, Router, IndexRoute } = require(''react-router'');
var hashHistory = require(''react-router-redux'')

var Main = require(''./components/Main'');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById(''app'')
);

El tutorial que estaba siguiendo usa React-Router 2.0.0, pero en mi escritorio estoy usando 4.1.1. Intenté buscar cambios pero no tuve éxito en encontrar una solución que funcionara.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

Answer 1

El error se debe a que la api en React Router v4 es totalmente diferente. Puedes probar esto:

import React from ''react'';
import ReactDOM from ''react-dom'';
import {
  BrowserRouter as Router,
  Route
} from ''react-router-dom'';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path=''/'' component={Main} />
  </Router>,
  document.getElementById(''app'')
);

Puede revisar la documentation para saber cómo funciona ahora.

Here tengo un repo con enrutamiento de animación.

Y here puedes encontrar una demo en vivo.

Answer 2

Recibí el mensaje de error anterior y fue extremadamente críptico. Probé las otras soluciones mencionadas y no funcionó.

Resulta que accidentalmente olvidé incluir el prop to en uno de los componentes <Link /> .

Ojalá el mensaje de error fuera mejor. Un simple required prop "to" not found o algo así habría sido útil. Esperemos que esto salve a alguien que haya encontrado el mismo problema alguna vez.

Answer 3

Solo asegúrese de agregar una to props a <Link> contrario también obtendrá el mismo error.

Answer 4

Tuve el mismo error y lo resolví actualizando el history de 2.xx a 4.xx

npm install history @ latest --save

Answer 5

Tuve una causa diferente, pero el mismo error y encontré esta pregunta por eso. Poner esto aquí en caso de que suceda lo mismo para otros y pueda ayudar. El problema para mí fue que había actualizado para react-router-4 y el acceso a la pathname acceso ha cambiado.

Cambio: (React-Router-3 y anteriores)

this.props.location.pathname

Para: (React-Router-4)

this.props.history.location.pathname