wake-up-neo.com

Router reagieren: Eigenschaft 'Pfadname' von undefined kann nicht gelesen werden

Ich habe gerade angefangen, React zu lernen, und bin bei diesem Fehler stecken geblieben. 

Nicht abgerufener TypeError: Eigenschaft 'Pfadname' von undefined .__ kann nicht gelesen werden. am neuen Router 

Hier ist mein 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')
);

Das von mir verwendete Tutorial verwendet React-Router 2.0.0, aber auf meinem Desktop verwende ich 4.1.1. Ich habe versucht, nach Änderungen zu suchen, fand aber keine erfolgreiche Lösung.

"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

Der Fehler liegt darin, dass die API in React Router v4 völlig anders ist. Sie können dies versuchen:

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

Sie können sich die documentation ansehen, um zu erfahren, wie es jetzt funktioniert.

Here Ich habe ein Repo mit Routing-Animation.

Und hier findest du eine Live-Demo.

19
Arnold Gandarillas

Ich habe die obige Fehlermeldung erhalten und war extrem kryptisch. Ich habe die anderen Lösungen ausprobiert und es hat nicht funktioniert.

Es stellte sich heraus, dass ich versehentlich vergessen habe, die to-Komponente in eine der <Link />-Komponenten aufzunehmen.

Ich wünschte, die Fehlermeldung wäre besser. Ein einfaches required prop "to" not found oder ähnliches wäre hilfreich gewesen. Hoffentlich erspart dies jemand anderen, der das gleiche Problem schon länger hatte.

9
Brennan Cheung

Ich hatte den gleichen Fehler und löste ihn durch Aktualisierung von historyvon 2.x.x auf 4.x.x

npm install history @ latest --save

4
Made in Moon

Ich hatte eine andere Ursache, aber den gleichen Fehler und bin deshalb auf diese Frage gestoßen. Setzen Sie dies hier, falls das Gleiche auch für andere gilt und es kann helfen. Das Problem für mich war, dass ich auf react-router-4 aktualisiert hatte und der Zugriff auf pathname geändert wurde.

Änderung: (React-Router-3 & früher)

this.props.location.pathname

An: (React-Router-4)

this.props.history.location.pathname

1
Rbar

Stellen Sie nur sicher, dass Sie to Requisiten zu <Link> hinzufügen, da Sie sonst auch dieselbe Fehlermeldung erhalten.

0
picacode