React router TypeError:\u this.props.history未定义

Question

我使用的反应路由器与反应js和我下面他们的留档，但面临这个错误

编译时会显示错误，

TypeError: _this.props.history is undefined

这是我的index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>

    </Route>
  </Router>
  ,
  document.getElementById('root')
);

这是我的App.js档案

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            headerText: "Props from Header.",
            contentText: "Props from content."
        };
    }
    render() {
        return (
          <div className="App">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
            </ul>
          </div>
        );
    }
}

export default App;

Answer 1

你在使用npm吗？我的package.json中的“^4.0.0”与“react router”有相同的问题。将其更改为“react router”：“^3.0.2”解决了我的问题。

Answer 2

对我来说解决办法就是改变

1） 组件作为子组件

<Route path="/path">
 <MyComponent/>
</Route>

到

2） 组件作为“组件”道具

<Route path="/path" component={MyComponent}>
</Route>

在这两种方式中它都呈现，所以对我来说非常混乱，在示例中，它们提供的代码与第一个示例中相同。（我当时使用的是“react router dom”包的5.1.2版）。

使现代化

您也可以使用这种方式（对于子组件（MyComponent的子组件）仅适用于此）

import {withRouter} from 'react-router-dom';

const componentClassWithHistory = withRouter(ChildComponent);
export {componentClassWithHistory as ChildComponent};

或用于默认导出

export default withRouter(ChildComponent)

或用于打印脚本

const componentClassWithHistory = (withRouter(ChildComponent as any) as any);
export {componentClassWithHistory as ChildComponent};

来源：https://reacttraining.com/react-router/core/api/withRouter

希望它能帮助别人。

Answer 3

这是因为从4.0.0开始，React路由器发生了变化。当您使用browserHistory时，现在应该从react router dom包中使用BrowserRouter。因此，您的代码如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { BrowserRouter, Route } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <Route path="/" component={ App }/>
    </BrowserRouter>, document.getElementById('root')
);

当然，您需要首先安装react-router-dom。

还请注意，如果您使用多个路由元素，则必须使用开关，如本答案中所述。