web-dev-qa-db-fra.com

React Router: Impossible de lire la propriété 'chemin' d'undefined

Je viens juste de commencer à apprendre à réagir et je suis resté bloqué à cette erreur. 

Uncaught TypeError: Impossible de lire la propriété 'chemin' d'un indéfini au nouveau routeur 

Voici mon code:

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

Le tutoriel que je suivais utilise React-Router 2.0.0, mais sur mon bureau, j'utilise 4.1.1. J'ai essayé de chercher des changements, mais je n'ai pas réussi à trouver une solution qui fonctionne.

"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"
reactjsreact-routerreact-jsxjsxreact-router-redux
17
Alon Bresler

L'erreur est due au fait que l'api dans React Router v4 est totalement différent .

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

Vous pouvez consulter la documentation pour savoir comment cela fonctionne maintenant.

Ici J'ai un dépôt avec une animation de routage.

Et ici vous pouvez trouver une démo en direct.

19
Arnold Gandarillas

J'ai eu le message d'erreur ci-dessus et c'était extrêmement cryptique. J'ai essayé les autres solutions mentionnées et cela n'a pas fonctionné.

Il se trouve que j'ai accidentellement oublié d'inclure le prop to dans l'un des composants <Link />.

J'aimerais que le message d'erreur soit meilleur. Un simple required prop "to" not found ou quelque chose comme cela aurait été utile. J'espère que cela sauvera quelqu'un d'autre qui a rencontré le même problème depuis un moment.

9
Brennan Cheung

J'ai eu la même erreur et je l'ai résolue en en mettant à jour historyde 2.x.x à 4.x.x

historique d'installation npm @ dernier --save

4
Made in Moon

J'avais une cause différente, mais la même erreur et suis tombé sur cette question à cause de cela. Mettre ceci ici au cas où la même chose se produirait pour les autres et cela pourrait aider . Le problème pour moi était que j'avais mis à jour react-router-4 et que l'accès à pathname avait changé.

Changement: (React-Router-3 & previous)

this.props.location.pathname

Vers: (React-Router-4)

this.props.history.location.pathname

1
Rbar

Assurez-vous simplement que vous ajoutez un accessoire to à <Link> sinon vous obtiendrez également la même erreur.

0
picacode