React-router TypeError：_this.props.history 未定义

Question

我正在使用带有 react js 的 react-router 并且我遵循他们的文档但面临这个错误

编译时显示错误，

 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;

原文由 Manzurul Hoque Rumi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是因为 React Router 从 4.0.0 开始发生了变化。您现在应该在使用 BrowserRouter 时使用 --- react-router-dom 包中的 browserHistory 。所以你的代码看起来像：

 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 。

另请注意，如果您使用多个 Route 元素，则必须使用 Switch 如 本答案 中所述。

原文由 Guillaume 发布，翻译遵循 CC BY-SA 3.0 许可协议