反应路由器dom不工作

Posted 2023-02-22

【中文标题】反应路由器dom不工作

【英文标题】：reacter router dom is not working

【发布时间】：2018-12-25 22:37:39

【问题描述】：

我不知道为什么这个程序不能在我的电脑上运行，而其他电脑可以 所以当我想运行这个程序时，它给出了一个错误，如下所示， 所以请尝试修复它...

index.js

import React, Component from 'react';
import ReactDOM from 'react-dom';
import BrowserRouter, Route from 'react-router-dom';
import PropTypes from 'prop-types';
import Posts from './components/posts';
import Profile from './components/profile';

class App extends Component 
  render() 
    return <div>Home</div>
  


ReactDOM.render(
        <BrowserRouter>
          <div>
            <Route path="/posts" component=Posts></Route>
            <Route path="/profile" component=Profile></Route>
          </div>
         </BrowserRouter>
    , document.querySelector('.container')); 

posts.js

    import React, Component from 'react';

    class Posts extends Component 
      render() 
        return <div>Posts</div>
      
    

    export default Posts;

profile.js

    import React, Component from 'react';

    class Profile extends Component 
      render() 
        return <div>Profile</div>
      
    

    export default Profile;

但它在 microsogt 边缘显示类似这样的错误...

它在 mozilla firefox 中显示这样的错误...

错误在 bundle.js 文件中...所以这里有一个来自 bundle.js 文件的完整错误消息，如下所示

bundle.js

【问题讨论】：

欢迎来到 ***。请花一些时间阅读帮助页面how to ask good questions。最后请学习how to create a Minimal, Complete, and Verifiable Example如果可能的话。

Cannot read property 'string' of undefined | React.PropTypes | LayoutPropTypes.js的可能重复

@mrpanchal 令人惊讶的是，上面的代码非常适合我。您能否添加错误的堆栈跟踪。如上图所示，单击 bundle.js 链接，它将显示它实际抛出错误的位置。我希望您已经发布了所有代码，如果没有，请发布。这将有助于解决问题。

@RahulRaut 我编辑了我的帖子并添加了显示错误的 bundle.js 图像......希望你能找到一些东西

【参考方案1】：

看起来像是版本控制问题。正如若言在他的回答中提到的 prop-types 已从 react 中移出。现在是单独的依赖。看起来您的 react-router-dom 使用的是旧版本。请查看我的 package.json 文件并对照它交叉检查您的版本。您可以简单地复制依赖项部分并粘贴您的 package.json 文件并运行 npm install 命令。

   "name": "react-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": 
   "prop-types": "^15.6.1",
   "react": "^16.4.0",
   "react-dom": "^16.4.0",
   "react-router-dom": "^4.3.1",
   "react-scripts": "1.1.4"
  ,
  "scripts": 
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test --env=jsdom",
   "eject": "react-scripts eject"
  ,
   "devDependencies": 
   "style-loader": "^0.21.0"
   

【参考方案2】：

prop-types可能因为各种依赖问题而无法安装。尝试删除node_modules 并运行npm install again。

还有更多错误，需要检查/node_modules/react-router-dom/es/BrowserRouter.js这个文件是否正确导入prop-types模块。

【讨论】：

我已经删除并再次安装了节点模块，但它仍然无法正常工作......我已经编辑了我的帖子以在 mozilla firefox 中显示错误

所以，你需要检查BrowserRouter.js文件。我想应该是react-router 版本的问题，检查依赖关系。 PropTypes 已从 React 移至它们自己的包 prop-types