编译失败。找不到模块: 无法解决“反应-路由器-域”问题

在 npm start之后，浏览器会显示错误:

未能编译./src/Component/App/App.js 模块未找到: 无法解析“ response-router-dom”。

React-router-dom 已经添加到 npm 中的依赖项中，因此也添加了 response-router 和 response。

使用 create-react-app myapp cmd 行创建了 Project。这在本地主机、节点服务器上运行。我有一个 api 和应用程序文件夹在我的项目文件夹。我尝试了很多方法。手动更新 app 文件夹中的 package.json，重新安装 response-router-dom，删除包锁定。Json 并重新初始化它。我的 api 文件夹只包含 node _ module、我的 api 文件、 route.js、 config.js、 index.js 以及 package.json 和 package-lock。Json.我已经在我的应用程序文件夹中尝试了 npm 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"
}
}

更新: npm install -S react-router-dom解决了错误。

304353 次浏览
小开

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

小开

I was facing the same issue. The following command will resolve it:

npm install react-router-dom --save

小开

Problem is, your react project does not 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.

npm install --save react-router-dom

小开

In my case I use Typescript and I needed to install 

npm i react-router-dom

AND

npm i @types/react-router-dom

After both installations errors gone.

小开 
npm i react-router-dom

or

npm install react-router-dom --save

This error occurs because of react-router-dom npm package is missing. install them by using the above cmd.

小开

You need to use --save while installing "react-router-dom". This will ensure that package is stored in package.json file as a dependency and when you try to build the solution on any another machine or on build server, it will take all the dependencies from package.json file and install them.

If you want to install all dependencies on a fresh machine, run the command - npm install

小开

For this problem "Module not found: Can't resolve 'react-router-dom' in"

//I found the following solving


// using ES6 modules


import { BrowserRouter, Route, Link } from "react-router-dom";

if it is not working so you have to use the following that I used using CommonJS modules

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


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


const Link = require("react-router-dom").Link;
小开

Make sure to use npm install --save react-router-dom not npm install --save react-router

小开 
npm install react-router-dom

This command resolves the same issue I faced.

小开

If You have already installed the dependancies , chcked the package.Json file for the react-router-dom dependancy to be sure and it still doesn't work... In this case, make sure , you import the packages from 'react-router-dom' in the index.js file.

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

小开

I resolved the issue when Docker and yarn involved with the error.

The key was to rebuild the Docker image after setting react-router-dom as the dev dependency, just like many answers here detail. The node_modules folder inside docker container needs to update! If your docker-compose.yaml parameter file does not remount node_modules as a volume or otherwise update it, then this answer will not work for your project. Steps:

  1. docker-compose down in project root, or stop the daemon in Docker Desktop
  2. yarn remove react-router-dom
  3. yarn add --dev react-router-dom adds react-router-dom as dev dependency
  4. docker-compose build to rebuild the Docker image
  5. docker-compose up -d for starting the devserver with daemon

In my case I was using Docker, with create-react-app using Typescript template. I'm using docker-compose to up and down the containers with Docker daemon. If you don't use docker-compose then you need to modify the container start/stop commands accordingly.

React Router was already installed and functioning correctly (yarn start outside Docker container was not reporting any error). Docker contained frontend server was not functioning correctly.

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

These are the dependencies you use in your project, make sure to install react-router-dom in to your react project.

npm i react-router-dom or yarn add react-router-dom to install react-router-dom in to your project.

If you use typescript in your project, you have to install @types/react-router-dom too

Use npm i @types/react-router-dom or yarn add @types/react-router-dom to install them.

Finally if you have successfully installed those libs in to your project, your package.json can be look like this,

"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",
},
小开

Use npm install react-router-dom --save for installing it.

小开

if you are using yarn instead of npm, this will help, it solved the same problem for me.

yarn add react-router-dom --save

小开

just install react-router-dom by using

yarn add react-router-dom

or

npm install --save react-router-dom
小开

npm install react-router-dom --save

This will work

小开

To install and configure react router. You first need to install the react-router-dom. Type the below command and run in your terminal,

npm i react-router-dom

If you are using react-router-dom v6. Then use the below code to configure react-router-dom along with layout,

App.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;

After configuring the react router in App.jsx. I am creating 3 components Home, About and Layout. Home and About are regular components and Layout component is to handle the Layout part in react-router-dom using Outlet.

Layout.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 />
</>
)
}

Home.jsx

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

About.jsx

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

提交答案