web-dev-qa-db-ja.com

Reactルーター：未定義のプロパティ 'pathname'を読み取れません

私は学習を始めましたReactそしてこのエラーで立ち往生しました。

キャッチされないTypeError：新しいルーターで未定義のプロパティ 'pathname'を読み取ることができません

ここに私のコードがあります：

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

私がフォローしていたチュートリアルでは、React-Router 2.0.0を使用していますが、デスクトップでは4.1.1を使用しています。変更を検索しようとしましたが、有効なソリューションを見つけることができませんでした。

"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
20
Alon Bresler

エラーは、React Router v4のAPIがまったく異なるためです。これを試すことができます。

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

documentation を確認して、現在どのように機能するかを確認できます。

ここ ルーティングアニメーションのリポジトリがあります。

こちら ライブデモを見つけることができます。

20
Arnold Gandarillas

上記のエラーメッセージが表示され、非常に不可解でした。上記の他のソリューションを試しましたが、うまくいきませんでした。

<Link />コンポーネントの1つにto propを含めるのを誤って忘れていました。

エラーメッセージの方が良かったと思います。簡単なrequired prop "to" not foundまたはそのようなものがあれば助かります。うまくいけば、いつか同じ問題に遭遇した他の人を救うことを願っています。

10
Brennan Cheung

同じエラーが発生し、history from 2.x.xから4.x.x

npm install history @ latest --save

4
Made in Moon

私には別の原因がありましたが、同じエラーがあり、そのためにこの質問に出くわしました。他の人にも同じことが起こる場合に備えて、これをここに置いてください。私にとっての問題は、react-router-4およびpathnameへのアクセスが変更されました。

変更：（React-Router-3以前）

this.props.location.pathname

To：（React-Router-4）

this.props.history.location.pathname

1
Rbar

to propsを<Link>に追加するようにしてください。そうしないと、同じエラーが発生します。

0
picacode