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

在 React Router v4 中写作时，您必须注意以下事实：

hashHistory不再受支持。如果你想达到同样的目标您必须使用HashRouter代替行为。
<IndexRoute>被常规<Route>取代。将exact道具添加到路线。

Nested Routes不再受支持。你必须放置嵌套路线内部儿童组件。

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

ReactDOM.render(
 <HashRouter>
    <Route path='' component={App}/>
 </HashRouter>, 
document.getElementById('app'));

Answer 2

哈希历史已被HashRouter取代，而import { HashRouter } from 'react-router-dom'已移至新包

rleid

此处有更多详情：

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

Answer 3

你正在观看2016年februari的视频，react-router的api已完全改变，它已被完全重写。我看到他们在视频中使用了反应路由器1x。你正在使用反应路由器4.我还没有潜入反应路由器4，但他们this.props.children应该被视为例如

var windowsArr = [];

windowsArr[1] = new BrowserWindow({title: "Win 1"});
windowsArr[2] = new BrowserWindow({title: "Win 2"});

function broadcast (message) {
    for (var i = 1; i <= windowArr.length; i++) {
        windowArr[i].webContents.send('asynchronous-message', message);
    }
}

在Component.js文件中的其他OtherComponent.js 将在this.props.children上提供

所以在你的例子中，你的代码期望道具（.children）上有一些道具，我认为它们不会被反应路由器4传递。

进一步信息： https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom/docs/api或降级到他们在视频中使用的反应路由器版本

但他们也提供了一些教程，例如egghead into react-router v4

React JS无法读取属性＆＃39; location＆＃39;未定义的

3 个答案: