陣營JS無法讀取的不確定

Question

屬性「位置」這是我第一次使用React JS，我堅持了這個錯誤，

我試圖汲取這次video 反應路由器也看了多次，但我仍然無法找到並解決問題：

的package.json

{ 
     "name": "cobareact", 
     "version": "1.0.0", 
     "description": "app pertama react", 
     "main": "index.js", 
     "scripts": { 
     "start": "webpack-dev-server --hot" 
     }, 
     "author": "", 
     "license": "ISC", 
     "dependencies": { 
     "babel-core": "^6.24.1", 
     "babel-loader": "^7.0.0", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "history": "^1.17.0", 
     "react": "^15.5.4", 
     "react-dom": "^15.5.4", 
     "react-router": "^4.1.1", 
     "react-router-dom": "^4.1.1", 
     "webpack": "^2.5.1", 
     "webpack-dev-server": "^2.4.5" 
     }, 
     "devDependencies": { 
     "webpack": "^2.5.1" 
     } 
    } 

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, IndexRoute, hashHistory } from 'react-router'; 

import App from './App.jsx'; 
import About from './About.js'; 
import Add from './Add.js'; 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path='' component={App}> 
      <IndexRoute component={About}></IndexRoute> 
      <Route path='about' component={About}></Route> 
      <Route path='add' component={Add}></Route> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

App.jsx

import React from 'react'; 
import ButtonAdd from './ButtonAdd'; 
import ButtonAbout from './ButtonAbout'; 
import Contacts from './Contacts'; 
import { Link } from 'react-router'; 

class App extends React.Component{ 
    render() { 
     return (
     <div> 
      <div> 
       {this.props.children} 
       <div><Link to="add"><ButtonAdd /></Link><Link to="about"><ButtonAbout /></Link></div> 
       <h1>Contact Book</h1> 
      </div> 
      <div> 
       <Contacts lists={CONTACTS} /> 
      </div> 
     </div> 
    ); 
    } 
} 

export default App; 

錯誤

Uncaught TypeError: Cannot read property 'location' of undefined`enter code here` 

警告

警告：無法道具鍵入：道具history標記爲Router中的要求，但其值爲undefined。 在路由器

Answer 1

哈希歷史已取代已被轉移到一個新的軟件包

import { HashRouter } from 'react-router-dom' 

進一步的細節在這裏HashRouter：

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

Answer 2

雖然寫作陣營路由器V4你必須採取以下事實的護理：

1. hashHistory沒有更多的支持。如果您想要達到相同的 行爲，則必須改用HashRouter。

2. <IndexRoute>被常規<Route>取代。將exact道具添加到路線。

3. Nested Routes不再支持。你必須在子組件內部嵌套路由 。

   import { HashRouter, Route } from 'react-router-dom'; 
   
   ReactDOM.render(
   <HashRouter> 
       <Route path='' component={App}/> 
   </HashRouter>, 
   document.getElementById('app')); 
   

Answer 3

您觀看來自2016年2月的視頻，反應路由器的api已經完全改變，它有蜜蜂n完全重寫。我看到他們在視頻中使用了反應路由器1x。您正在使用路由器反應4.我沒有潛入反應路由器4還沒有，但他們this.props.children應該被看作是這個例如

import Component from './Component.js'; 
import OtherComponent from './OtherComponent'; 

<Component> 
    <OtherComponent /> 
</Component> 

的Component.js內提交其他OtherComponent.js 西港島線this.props提供。兒童

所以在烏爾例如，烏爾代碼期望一些道具可用的道具（。兒童），即是我假定不受傳遞反應路由器4.

進一步信息： https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom/docs/api或downgrate該版本作出反應，他們在視頻中使用的路由器，

但他們也以理論家爲反應路由器V4