コンパイルに失敗しました。モジュールが見つかりません： 'react-router-dom'を解決できません

npm startの後、ブラウザはエラーを出します：

./src/components/App/App.jsのコンパイルに失敗しましたモジュールが見つかりません： 'react-router-dom'を解決できません。

React-router-domがnpmの依存関係に追加され、react-routerとreactも追加されました。

プロジェクトはcreate-react-app myapp cmd行を使用して作成されています。これはローカルホストのノードサーバーで実行されます。プロジェクトフォルダー内に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コマンドを試しました。アプリフォルダー内のパブリックフォルダーと同じファイルを保持する「ビルド」フォルダーを作成するだけです。 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がエラーを解決しました。

javascriptnode.jsreactjsreact-router-dom

2018/12/24Dokme

問題は、reactプロジェクトにreact-router-domモジュールがないことです。次のコマンドを使用してインストールおよび保存できます。プロジェクトのルート内でこのコマンドを実行するだけで、すべてが正常に動作します。

npm install --save react-router-dom

2020/04/09Pranay kumar