编译失败。找不到模块：无法解析"反应路由器-dom"

npm start后，浏览器给出错误：

编译 ./src/components/App/App 失败.js找不到模块：无法解析"react-router-dom"。

React-router-dom 已被添加到 npm 中的依赖项中，react-router 和 React也是如此。

项目已使用create-react-app myappcmd 行创建。这是在本地主机、节点服务器上运行的。我的项目文件夹中有一个 api 和应用程序文件夹。我尝试了各种事情。在应用程序文件夹中手动更新了我的package.json，重新安装了react-router-dom，删除应用程序文件夹中的package-lock.json并重新初始化它。我的api文件夹只包含node_modules，我的api文件，route.js，config.js，index.js还有一个package.json和package-lock.json。我已经在我的应用程序文件夹中尝试了 npm 构建命令。它只是创建一个"构建"文件夹，其中包含与我的应用程序文件夹中的公共文件夹相同的文件。我也尝试运行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"
}
}

以下命令将解决它：

npm install react-router-dom --save

如果需要，您可以使用-S(大写)而不是--save;它们都做同样的事情。

就我而言，我使用打字稿，我需要安装

npm i react-router-dom

和

npm i @types/react-router-dom

还建议在安装两者后关闭并重新启动 IDE

重新启动后，两个安装错误都消失了。

将按照以下步骤修复此错误：

npm install --save react-router-dom

把它放在public/index.js：

<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

只需使用以下方法安装 react-router-dom

：

yarn add react-router-dom

^{或npm install --save react-router-dom如本答案中所述。}

对于此问题"找不到模块：无法解析'反应路由器-dom' 在">

//I found the following solving
// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";

如果它不起作用，那么您必须使用我使用 CommonJS 模块使用的以下内容

const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;

如果你使用 yarn 而不是 npm，这将有所帮助：

yarn add react-router-dom --save

安装和配置反应路由器。您首先需要安装 react-router-dom。键入以下命令并在终端中运行，

npm i react-router-dom

如果您使用的是 react-router-dom v6。然后使用以下代码配置 react-router-dom 以及布局，

应用.jsx：

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './Components/Home'
import About from './Components/About'
import Layout from './Components/Layout'

function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

在 App.jsx 中配置反应路由器后。我正在创建 3 个组件主页、关于和布局。Home和About是常规组件，布局组件是使用Outlet在react-router-dom中处理布局部分。

布局.jsx

import { Outlet, Link } from 'react-router-dom'
export default function Layout() {
return (
<>
<Link to="/">Home</Link>&nbsp;&nbsp;&nbsp;
<Link to="/about">About</Link>
<Outlet />
</>
)
}

首页.jsx

export default function Home() {
return (
<>
<p>This is Home</p>
</>
)
}

关于.jsx

export default function About() {
return (
<>
<p>This is About Us</p>
</>
)
}

使用以下命令。

npm i react-router-dom

如果不工作。

npm i react-router-dom --save

或。

npm i react-router-dom --force

我解决了 Docker 和 yarn 涉及错误时的问题。

关键是在将 react-router-dom 设置为开发依赖项后重建 Docker 映像，就像这里的许多答案一样。docker 容器内的node_modules文件夹需要更新！如果您的docker-compose.yaml参数文件没有node_modules重新挂载为卷或以其他方式更新它，则此答案不适用于您的项目。步骤：

在项目根目录中docker-compose down，或在 Docker Desktop 中停止守护程序
yarn remove react-router-dom
yarn add --dev react-router-dom添加了 react-router-dom 作为开发依赖项
docker-compose build重建 Docker 映像
使用守护程序启动开发服务器的docker-compose up -d

就我而言，我使用的是Docker，create-react-app使用的是Typescript模板。我正在使用docker-compose通过 Docker 守护程序上下处理容器。如果不使用docker-compose则需要相应地修改容器启动/停止命令。

React Router 已经安装并正常运行(yarn startDocker 容器之外没有报告任何错误)。Docker 包含的前端服务器无法正常运行。

"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
},

这些是你在项目中使用的依赖项，请确保将react-router-dom安装到你的 react 项目中。

用npm i react-router-dom或yarn add react-router-dom将 react-router-dom 安装到您的项目中。

如果您在项目中使用打字稿，则还必须安装@types/react-router-dom

使用npm i @types/react-router-dom或yarn add @types/react-router-dom来安装它们。

最后，如果你已经成功地将这些库安装到你的项目中，你的package.json可以看起来像这样，

"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
......
"react-router-dom": "^x.x.x",
.....
"@types/react-router-dom": "^x.x.x",
},

如果已安装依赖项，请检查包。确定反应路由器 dom 依赖项的 json 文件，但它仍然不起作用...... 在这种情况下，请确保从索引.js文件中的"react-router-dom"导入软件包：

import { BrowserRouter as Router, Switch, Route } from "react-router-dom"

安装 "react-router-dom" 时需要使用--save。这将确保包作为依赖项存储在package.json文件中，当您尝试在任何其他计算机或生成服务器上生成解决方案时，它将从package.json文件中获取所有依赖项并安装它们。

如果要在新计算机上安装所有依赖项，请运行命令 -npm install

相关内容

最新更新

热门标签：