後npm start
、ブラウザに次のエラーが表示されます:
./src/components/App/App.js のコンパイルに失敗しました。モジュールが見つかりません: 'react-router-dom' を解決できません。
React-router-dom が npm の依存関係に追加され、 react-router と react も追加されました。
プロジェクトは、コマンドラインを使用して作成されましたcreate-react-app myapp
。これは、ローカルホストのノード サーバーで実行されます。プロジェクト フォルダー内に 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 以外は何も含まれていません。app フォルダーで npm build コマンドを試しました。app フォルダー内に public フォルダーと同じファイルを保持する '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"
}
}
ベストアンサー1
次のコマンドで解決できます。
npm install react-router-dom --save
必要に応じて、-S
の代わりに (大文字)を使用することもできます。--save
どちらも同じことをする。