阵营路由器类型错误：_this.props.history未定义

我使用的反应，路由器反应js和跟随他们的文档，但面对这个错误阵营路由器类型错误：_this.props.history未定义

在编译它显示的错误我，

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;

来源

2017-03-17 Manzurul Hoque Rumi

你从哪里叫它？ – Shota

我在index.js文件中使用了路由器，你可以从代码中看到这个。 –

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

来源

2017-03-20 09:42:04

“react-router”：“^ 3.0.2”适合我。但不明白为什么4.0.0不起作用。 –

我也是）我只是将它与我上次工作的package.json进行比较。 –

当您按照官方教程，第1课不起作用时，这不是一个好的标志：> – user798719

这是因为从4.0.0开始，React Router中的内容发生了变化。当您使用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。

另请注意，如果您使用多个Route元素，则必须使用Switch，如in this answer所述。

来源

2017-05-30 13:01:22 Guillaume

-1

以下解决方案适用于我ReactDOM.render：

<BrowserRouter> 
    <Switch> 
    <Route path="/home" component={Home} /> 
    <Route path="/user" component={User} /> 
    <Route path="*" component={page404} /> 
    </Switch> 
</BrowserRouter>

它使用多路由。

来源

2017-11-25 13:10:14

阵营路由器类型错误：_this.props.history未定义

回答

相关问题