陣營路由器類型錯誤：_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未定義

回答

相關問題