反应器路由器dom无法正常工作

时间:2018-07-18 06:11:24

标签: javascript reactjs npm react-router react-router-dom

我不知道为什么该程序无法在我的计算机上运行而其他PC可以运行 所以当我想运行这个程序时,下面给出了一个错误, 所以请尝试修复它...

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边缘显示了类似这样的错误...

error

它在mozilla firefox中显示了这样的错误... enter image description here

错误在bundle.js文件中...所以这里是来自bundle.js文件的完整错误消息,如下所示

bundle.js enter image description here

2 个答案:

答案 0 :(得分:0)

prop-types可能由于各种依赖性问题而未安装。尝试删除node_modules并运行npm install again

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

答案 1 :(得分:0)

似乎是版本问题。如若岩在他的回答中提到的,道具类型已经从反应中移出。现在是单独的依赖项。看起来您的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"
   }
}