Javascript 编译失败。找不到模块：无法解析“react-router-dom”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53914013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to compile. Module not found: Can't resolve 'react-router-dom'
提问by Dokme
After npm start, the browser gives the error:
之后npm start，浏览器报错：
Failed to compile ./src/components/App/App.js Module not found: Can't resolve 'react-router-dom'.
无法编译 ./src/components/App/App.js 模块未找到：无法解析“react-router-dom”。
React-router-dom has been added to the dependencies in npm and so has react-router and react.
React-router-dom 已添加到 npm 中的依赖项中，因此也添加了 react-router 和 react。
Project has been created using the create-react-app myappcmd line. This is runned on a localhost, node server. I have an api and app folder inside my project folder. I have tried various things. Updated manually my package.json inside the app folder, reinstalled react-router-dom, delete the package-lock.json in the app folder and reinitialize it. My api folder holds nothing but node_modules, my api file, route.js, config.js, index.js and also a package.json and package-lock.json. I have tried the npm build command in my app folder. It just creates a 'build' folder which holds the same files as my public folder inside my app folder. I also tried running yarn add react-router-dom.
已使用create-react-app myappcmd 行创建项目。这是在本地主机节点服务器上运行的。我的项目文件夹中有一个 api 和 app 文件夹。我尝试了各种各样的事情。手动更新我的app文件夹中的package.json，重新安装react-router-dom，删除app文件夹中的package-lock.json并重新初始化。我的 api 文件夹只包含 node_modules、我的 api 文件、route.js、config.js、index.js 以及 package.json 和 package-lock.json。我在我的应用程序文件夹中尝试了 npm build 命令。它只是创建一个“build”文件夹，其中包含与我的应用程序文件夹中的公共文件夹相同的文件。我也试过跑步yarn add react-router-dom。
//=========App.js file=========
//dependencies
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
//components
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
import Home from '../Pages/Home';
import StudentOverview from '../Pages/StudentOverview';
import StudentDetails from '../Pages/StudentDetails';
import Management from '../Pages/Management';
import StudentAdd from '../Pages/StudentAdd';
import Exercise from '../Exercise/Exercise';
//includes
import '../../../public/css/kdg-fonts.css';
import '../../../public/css/normalize.css';
import '../../../public/css/responsive.css';
import '../../../public/css/say-my-name.css';
import '../../../public/css/style.css';
//Run
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route path='*' component={Header} />
<Route path='*' component={Footer} />
<Route exact path='/' component={Home} />
<Route exact path='/studenten' component={StudentOverview} />
<Route exact path='/studenten/:id' component={StudentDetails} />
<Route exact path='/beheer' component={Management} />
<Route exact path='/beheer/add' component={StudentAdd} />
<Route exact path='/oefenen' component={Exercise} />
</div>
</Router>
);
}
}
export default App;
//=========appfolder/package.json file=========
{
"name": "saymyname",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"gulp": "^4.0.0",
"gulp-changed": "^3.2.0",
"gulp-clean-css": "^4.0.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.1"
}
}
UPDATE:
npm install -S react-router-domresolved the error.
更新：
npm install -S react-router-dom解决了错误。
回答by Rajnikant Lodhi
This error fix by following steps.
Step.1:npm install --save react-router-dom
Step.2:<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
script tag put in public/index.js
通过以下步骤修复此错误。
步骤 1：npm install --save react-router-dom
步骤 2：<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
脚本标签放入public/index.js
回答by Farzana Khan
I was facing the same issue. The following command will resolve it:
我面临着同样的问题。以下命令将解决它：
npm install react-router-dom --save
npm install react-router-dom --save
回答by Pranay kumar
Problem is, your react project doesn't have a react-router-dom module. You can install and save it with the help of the following command. Just run this command within your project root and everything works fine.
问题是，您的 React 项目没有 react-router-dom 模块。您可以在以下命令的帮助下安装和保存它。只需在您的项目根目录中运行此命令，一切正常。
npm install --save react-router-dom
npm install --save react-router-dom
