React（路由器）錯誤：「不支持直接調用PropType ...」

剛開始學習React，我正在按照指南構建基本單頁面應用程序。我得到這個錯誤：React（路由器）錯誤：「不支持直接調用PropType ...」

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

「在E」是不是我犯的一個錯誤。

我也看到這個錯誤，但懷疑其由其他原因造成的：

TypeError: r.props.history is undefined

由於我是新反應我甚至不知道從哪裏開始。我知道早期版本的react-router（我使用4.1.1）中的react-router和PropType驗證器存在一些問題。

這是我目前的index.html - 在我的項目的唯一文件：

<!DOCTYPE html> 
<html> 

<head> 
    <title>React! React! React!</title> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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>

來源

2017-05-31 DAnsermino

你的問題是關於您呼叫路由器的方式。由於版本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/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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

來源

2017-05-31 05:27:18

這更多的是與React版本，您正在使用請使用最新版，道具類型封裝有一些不兼容的問題，請檢查here，如果你開始學習作出反應，我建議先從create-react-app

來源

2017-07-13 17:40:03

schweller，我不相信在這種情況下都需要路由器和react-router-dom。只有react-router-dom是必要的。

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

來源

2017-08-18 23:28:01 bill

這並不提供答案的問題。一旦你有足夠的[聲譽]（https://stackoverflow.com/help/whats-reputation），你將可以[對任何帖子發表評論]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提問者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [來自評論]（/ review/low-quality-posts/17078747） – Alisson

hi @Alisson，我明白我的回答只是澄清/更正了以前的回答，但由於我缺乏聲譽，我無法直接對他發表評論回答。我明白，如果你覺得最好是根據規則去除我的答案。謝謝！法案 – bill

React（路由器）錯誤：「不支持直接調用PropType ...」

回答

相關問題