React-Router 无法读取未定义的属性字符串答案

【问题标题】：React-Router cannot read property string of undefinedReact-Router 无法读取未定义的属性字符串
【发布时间】：2017-10-11 19:33:48
【问题描述】：

我是 React 新手，我正在使用 React、Redux 和 React Router 构建我的第一个应用程序，到目前为止，我已经成功设置了我的样板，但是当我想使用 React-Router 并创建路由时，我得到了跟随错误

TypeError: Cannot read property 'string' of undefined
./node_modules/react-router-dom/es/BrowserRouter.js
node_modules/react-router-dom/es/BrowserRouter.js:38
  35 | }(React.Component);
  36 | 
  37 | BrowserRouter.propTypes = {
> 38 |   basename: PropTypes.string,
  39 |   forceRefresh: PropTypes.bool,
  40 |   getUserConfirmation: PropTypes.func,
  41 |   keyLength: PropTypes.number,

只有在我尝试导入和使用时才会发生这种情况

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

这是我的 index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import store from './store'

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

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

class Hello extends Component {
  render(){
    return(
      <div>Hello</div>
    )
  }
}


class GoodBye extends Component {
  render(){
    return(
      <div>GoodBye</div>
    )
  }
}

ReactDOM.render(<Provider store={store}>
  <BrowserRouter>
    <Route path="/hello" component={Hello}/>
    <Route path="/goodbye" component={GoodBye}/>
  </BrowserRouter>
  </Provider>, document.getElementById('root'));
registerServiceWorker();

还有我的 package.json

{
  "name": "reactreduxrouterblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^2.0.0-rc5",
    "react-router-dom": "^4.0.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.4.1",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

欢迎任何知识谢谢！

【问题讨论】：

查看node-modules/react-router-dom/es/BrowserRouter.js，我看到import PropTypes from 'prop-types'; 是第一行之一。你能确定这条线存在吗？
这个问题已经在react-router-dom ^4.2.2修复了

标签： javascript reactjs react-router

【解决方案1】：

在package.json: react-router-dom ^4.2.2 中更新您的react-router-dom

【讨论】：

【解决方案2】：

有时它可能是由于“react-router-dom”和“react-router-prop-types”的不兼容版本导致的。对我来说，它适用于以下配置。

react-router-dom:"^4.2.2",
react-router-prop-type:"^3.2.1"

【讨论】：

【解决方案3】：

尝试将PropTypes 包添加到您的应用中。

basename: PropTypes.string

看起来你只是缺少那个包。

编辑：

请务必运行 npm install 以安装所有依赖项。

【讨论】：

我安装了这个包，我仍然得到同样的错误
你运行npm install了吗？

【解决方案4】：

import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line


App.propTypes = {
    monkey: PropTypes.string,           <--omit "React."
    cat: PropTypes.number.isRequired    <--omit "React."
};


//Wrong:  React.PropTypes.string
//Right:  PropTypes.string

【讨论】：