react router v^4.0.0 Uncaught TypeError：無法讀取undefined的屬性'location'

我一直在使用react router（我使用版本^ 4.0.0）時遇到了一些麻煩。react router v^4.0.0 Uncaught TypeError：無法讀取undefined的屬性'location'

這是我index.js

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


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

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

的App.js就是什麼。我在這裏張貼的基本之一，因爲它是沒有問題的（我相信）

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

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App;

，這是當我檢查控制檯日誌

Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined 
    at new Router (Router.js:43) 
    at ReactCompositeComponent.js:295 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294) 
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188) 
    at Object.mountComponent (ReactReconciler.js:46) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 
    at Object.mountComponent (ReactReconciler.js:46)

哦發生了什麼，這是包.json以防萬一

{ 
    "name": "teste2", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^4.0.0" 
    }, 
    "devDependencies": { 
    "react-scripts": "0.9.5" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
}

我一直在其他地方檢查這個，但我沒有找到解決辦法。

非常感謝你們的耐心和幫助！

來源

2017-03-19 Lucas fersa

你正在做一些錯誤的事情。首先，瀏覽器歷史不是V4中的事情，所以你可以刪除它。其次，你從react-router導入一切，它應該是react-router-dom。第三，react-router-dom不輸出Router，而是輸出BrowserRouter，因此您需要import { BrowserRouter as Router } from 'react-router-dom。看起來你只是把你的V3應用程序，並期望它與V4，這不是一個好主意。

來源

2017-03-20 02:49:25

還有點兒情況哈哈。我從Udemy的課程中學習，並使用V3。我試過了，沒有奏效。我在V4中查找了一些方法來使用它，但我能找到的是有人告訴我降級。我就是這樣結束的。無論如何，謝謝你的幫助。我真的很感激它：D –

不用擔心。最好的學習方法是嘗試一下，所以我不會責怪你。祝你好運！ –

不幸的是，github倉庫中的文檔和示例都過時了。 PS：@Lucasfersa如果答案解決了您的問題，請不要忘記接受它:-) –

我已經嘗試了一切建議在這裏，但沒有爲我工作。所以，如果我能幫助任何人有類似的問題，我已經檢查每一個教程不會更新與版本4

這裏工作是我做了什麼，使工作

import React from 'react'; 
import App from './App'; 

import ReactDOM from 'react-dom'; 
import { 
    HashRouter, 
    Route 
} from 'react-router-dom'; 


ReactDOM.render((
     <HashRouter> 
      <div> 
       <Route path="/" render={()=><App items={temasArray}/>}/> 
      </div> 
     </HashRouter > 
    ), document.getElementById('root'));

這是我設法使其工作沒有任何錯誤或警告的唯一方法。

在你想要的道具傳遞給您的組件對我來說，最簡單的辦法的情況是這樣：

<Route path="/" render={()=><App items={temasArray}/>}/>

來源

2017-06-16 11:42:27 Lancelot

react router v^4.0.0 Uncaught TypeError：無法讀取undefined的屬性'location'

回答

相關問題