Question

刚开始学习React，我按照指南构建基本的单页应用。我收到此错误：

Warning: Failed context type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at <**shortened url I was forced to remove**>
in e

指向的网址是：https://github.com/facebook/prop-types/blob/master/README.md#difference-from-reactproptypes-dont-call-validator-functions

＆＃34;在e＆＃34;对我来说不是一个错误。

我也看到了这个错误，但怀疑它是由另一个造成的：

TypeError: r.props.history is undefined

由于我是React的新手，我甚至不知道从哪里开始。我知道在反应路由器的早期版本中，react-router和PropType验证器存在一些问题（我使用4.1.1）。

这是我当前的index.html - 我项目中唯一的文件：

<!DOCTYPE html>
<html>

<head>
  <title>React! React! React!</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script type="text/babel">
    var App = React.createClass({
      render: function(){
        return (
          <div>
            <h1>Simple SPA</h1>
            <ul className="header">
              <li>Home</li>
              <li>Stuff</li>
              <li>Contact</li>
            </ul>
            <div className="content">
            </div>
          </div>
        )
      }
    })

    var destination = document.querySelector("#container");

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

        </ReactRouter.Route>
      </ReactRouter.Router>,
      destination
    );
  </script>
</body>
</html>

Answer 1

您的问题与您呼叫路由器的方式有关。从版本4+开始，React Router使用BrowserRouter包中的React Router DOM。

只需从UMD套件中添加React Router DOM，您的代码即可运行：

<!DOCTYPE html>
<html>

<head>
  <title>React! React! React!</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.min.js"></script>
  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script type="text/babel">
    var ReactRouter = window.ReactRouterDOM
    var App = React.createClass({
      render: function() {
        return (
          <div>
            <h1>Simple SPA</h1>
            <ul className="header">
              <li>Home</li>
              <li>Stuff</li>
              <li>Contact</li>
            </ul>
            <div className="content">
            </div>
          </div>
        )
      }
    })

    var destination = document.querySelector("#container");
    ReactDOM.render(
      <ReactRouter.BrowserRouter>
        <ReactRouter.Route path="/" component={App}/>
      </ReactRouter.BrowserRouter>,
      destination
    );
  </script>
</body>
</html>

进一步参考：https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

Answer 2

这与你正在使用的React版本有关，请使用最新版本，prop-types包有一些不兼容问题请查看here，如果你开始学习React I建议从create-react-app

开始

Answer 3

schweller，我不相信在这种情况下都需要反应路由器和react-router-dom。只需要react-router-dom。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

＆＃13;

React（路由器）错误：＆＃34;不支持直接调用PropTypes ...＆＃34;

3 个答案: