web-dev-qa-db-ja.com

React-Router-キャッチされていないTypeError：未定義のプロパティ 'route'を読み取れません

Reduxでreact router v4を使用しようとすると、このエラーが発生します。ドキュメントに従っているようで、どこにも情報を見つけることができなかったため、困っています。

Uncaught TypeError：未定義のプロパティ 'route'を読み取れません

これが私のコードです：

import React, {Component} from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  withRouter
} from 'react-router-dom'
import Menu from './Menu';
import { connect } from "react-redux";
import Play from './Play';
class Manager extends Component {
    render() {
        return(
             <Router>
                <div>
                  <Route exact path="/" component={Menu}/>
                  <Route path="/menu" component={Menu}/>
                  <Route path="/play" component={Play}/>
                </div>
              </Router>
        )
    }
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Manager));

そしてここに完全なエラーがあります：

game.js:26838 Uncaught TypeError: Cannot read property 'route' of undefined
    at Route.computeMatch (game.js:26838)
    at new Route (game.js:26815)
    at game.js:15322
    at measureLifeCyclePerf (game.js:15102)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (game.js:15321)
    at ReactCompositeComponentWrapper._constructComponent (game.js:15307)
    at ReactCompositeComponentWrapper.mountComponent (game.js:15215)
    at Object.mountComponent (game.js:7823)
    at ReactCompositeComponentWrapper.performInitialMount (game.js:15398)
    at ReactCompositeComponentWrapper.mountComponent (game.js:15285)
javascriptreactjsreduxreact-routerreact-router-v4
10
Rob McMackin

ここでは、4.0.0以上のreact-router-dom最新バージョンを使用しています。

そのため、利用できるルーターはありません。このバージョンではBrowserRouterを使用する必要があります。

あなたのコードは

import React, {Component} from 'react';
import {
  Switch,
 Route,
 Link,
 withRouter
} from 'react-router-dom'
import Menu from './Menu';
import { connect } from "react-redux";
import Play from './Play';
class Manager extends Component {
   render() {
    return(<div>
         <Switch>

              <Route exact path="/" component={Menu}/>
              <Route path="/menu" component={Menu}/>
              <Route path="/play" component={Play}/>

          </Switch></div>
    )
}
}
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Manager));

index.jsファイルでBrowserRouterを使用して、このコンポーネントをレンダリングします

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((<BrowserRouter><Manager/></BrowserRouter>), document.getElementById('root'));
4
Chandrakant Thakkar

ルーターを「react-router-dom」と呼ばれる新しい反応ルーター4.0に変更します。

npm/yarnを使用してモジュール「react-router-dom」をインストールし、ルーターをそのように定義します。

インポートを忘れないでください。 'react-router-dom'から{BrowserRouter、Route}をインポートします。

         <BrowserRouter>
              <div>
              <Route exact path="/" component={Menu}/>
              <Route path="/menu" component={Menu}/>
              <Route path="/play" component={Play}/>
              </div>
          </BrowserRouter>
2
Evil Dr. PorkChop

だから私はそれを私のローカルサーバーから実行していました、私がそれが機能したwebpackサーバーから実行したとき。

0
Rob McMackin

私は<Navigation />私の内部<Router></Router>

0
shay

実際のルーターよりも高いwithRouterを使用する必要はありません:)削除してください：

export default connect(mapStateToProps, mapDispatchToProps)(Manager);

Routeにネストされたコンポーネント内の履歴情報にアクセスする場合は、withRouter HOCを使用する必要があります。詳細はこちら： https://reacttraining.com/react-router/web/api/withRouter

0
Антон Досов