Javascript 反应（路由器）错误："；不支持直接调用PropTypes…”；_Javascript_Reactjs_React Router

Javascript 反应（路由器）错误："；不支持直接调用PropTypes…”；

javascript reactjs

Javascript 反应（路由器）错误："；不支持直接调用PropTypes…”；,javascript,reactjs,react-router,Javascript,Reactjs,React Router,刚开始学习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

刚开始学习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

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

这是我当前的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>


反应反应反应
var App=React.createClass({
render:function（）{
返回(
简单水疗

家
东西
接触

)
}
})
var destination=document.querySelector（“容器”）；
ReactDOM.render(
,
目的地
);

您的问题在呼叫路由器的过程中。由于版本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>


反应反应反应
var ReactRouter=window.ReactRouterDOM
var App=React.createClass({
render:function（）{
返回(
简单水疗

家
东西
接触

)
}
})
var destination=document.querySelector（“容器”）；
ReactDOM.render(
,
目的地
);

进一步参考：

这与您正在使用的

React

版本有关。请使用最新版本，道具类型包存在一些不兼容问题。请检查，如果您正在开始学习React，我建议从

schweller开始，我不认为在这种情况下需要react路由器和react路由器dom。只有react-router-dom是必需的

这并不能回答这个问题。一旦你有足够的钱，你将能够；相反你好@Alisson，我知道我的回答只是澄清/纠正了之前的回答，但由于我缺乏声誉，我无法直接对他的回答发表评论。如果你觉得根据规则最好删除我的答案，我理解。谢谢账单

<!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>