反应路由器 dom 不工作
reacter router dom is not working
我不知道为什么这个程序不能在我的电脑上运行而其他电脑可以
所以当我想 运行 这个程序时,它给出了一个错误,如下所示,
所以试着帮助修复它...
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 edge 中显示类似这样的错误...
它在 mozilla firefox 中显示这样的错误...
错误在 bundle.js 文件中...所以这里是来自 bundle.js 文件的完整错误消息,如下所示
bundle.js
prop-types
可能是因为各种依赖问题导致安装不上。尝试删除 node_modules
和 运行 npm install again
.
还有更多错误,您需要检查/node_modules/react-router-dom/es/BrowserRouter.js
这个文件是否正确导入了prop-types模块。
看起来像是版本控制问题。正如若言在他的回答中提到的,道具类型已经从反应中移出。现在是单独的依赖项。看起来你的 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"
}
}
我不知道为什么这个程序不能在我的电脑上运行而其他电脑可以 所以当我想 运行 这个程序时,它给出了一个错误,如下所示, 所以试着帮助修复它...
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 edge 中显示类似这样的错误...
它在 mozilla firefox 中显示这样的错误...
错误在 bundle.js 文件中...所以这里是来自 bundle.js 文件的完整错误消息,如下所示
bundle.js
prop-types
可能是因为各种依赖问题导致安装不上。尝试删除 node_modules
和 运行 npm install again
.
还有更多错误,您需要检查/node_modules/react-router-dom/es/BrowserRouter.js
这个文件是否正确导入了prop-types模块。
看起来像是版本控制问题。正如若言在他的回答中提到的,道具类型已经从反应中移出。现在是单独的依赖项。看起来你的 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"
}
}