javascript - React-Router - 未捕获的类型错误：无法读取未定义的属性“路由”

Question

尝试将 react router v4 与 redux 一起使用并遇到此错误，似乎正在关注文档，在任何地方都找不到任何信息，所以我不知所措：

未捕获的类型错误：无法读取未定义的属性“路线”

这是我的代码：

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)

Answer 1

在这里，您使用的是 react-router-dom 4.0.0 以上的最新版本。

所以，没有可用的路由器。您需要在此版本中使用 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'));

Answer 2

将您的路由器更改为名为“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>

Answer 3

我通过移动我的<Navigation />内部来解决这个问题<Router></Router>

Answer 4

您不需要使用高于实际路由器的 withRouter :) 只需将其删除：

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

如果要访问嵌套在 Route 中的组件内的历史信息，则需要使用 withRouter HOC。您可以在此处找到详细信息：https ://reacttraining.com/react-router/web/api/withRouter

Answer 5

所以我在本地服务器上运行它，当我在 webpack 服务器上运行它时它工作。