Reactの勉強をしており、react-create-appで環境構築をし、react-route-domをインストールしてページ遷移機能をつけようとしています。
「注文する」ボタンを押すと届け先情報を入力する画面に遷移するというストーリーです。
react-route-domのインストールはうまく行ったのですが、Routerなどを設定してブラウザで確認してみると、
Module not found: Can't resolve ./Order.js
というエラーが出てしまいます。
調べてみたのですが、自力では原因がわからず・・・。エラー解消には何が必要かアドバイスをいただけますと幸いです。
コード
↓Order.jsに「注文する」をクリックした時に届け先に入力ページに遷移するRouterを設定。
JavaScript
1import React from 'react'; 2import { 3 BrowserRouter as Router, 4 Switch, 5 Route, 6 Link 7 } from 'react-router-dom'; 8 9const form = () => <div><p>届け先入力ページ</p></div> 10 11const Order = () => { 12 return( 13 <Router> 14 <div> 15 <div> 16 <p><Link to='/form'>注文する</Link></p> 17 </div> 18 <div> 19 <Route path='/form' exact component={form}/> 20 </div> 21 </div> 22 </Router> 23 ) 24} 25 26export default Order;
↓これをApp.jsに渡します。
JavaScript
1import React from 'react'; 2import Order from './Order'; 3 4class App extends React.Component { 5 constructor(props){ 6 super(props); 7 } 8 render(){ 9 return( 10 <div> 11 <Order/> 12 </div> 13 ); 14 } 15} 16 17export default App;
↓そしてApp.jsをindex.jsに渡します。
JavaScript
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import App from './App'; 4import Body from './Body'; 5import * as serviceWorker from './serviceWorker'; 6 7ReactDOM.render(<App />, document.getElementById('root')); 8ReactDOM.render(<Body />, document.getElementById('body')); 9serviceWorker.unregister();
(App.jsを挟まなくても良いかと思ったのですが、参考にしていた
react-router-dom v4 入門してみた
ではApp.jsを挟んでいたためその通りに進めてみました。)
そしてブラウザをみると、
Module not found: Can't resolve ./Order.js
というエラーが出ています。
関連があるかわかりませんが、package.jsonは以下です。
JavaScript
1{ 2 "name": "project1", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "@testing-library/jest-dom": "^4.2.4", 7 "@testing-library/react": "^9.4.0", 8 "@testing-library/user-event": "^7.2.1", 9 "bootstrap": "^4.4.1", 10 "node-sass": "^4.13.0", 11 "react": "^16.12.0", 12 "react-dom": "^16.12.0", 13 "react-router-dom": "^5.1.2", 14 "react-scripts": "3.3.0" 15 }, 16 "scripts": { 17 "start": "react-scripts start", 18 "build": "react-scripts build", 19 "test": "react-scripts test", 20 "eject": "react-scripts eject" 21 }, 22 "eslintConfig": { 23 "extends": "react-app" 24 }, 25 "browserslist": { 26 "production": [ 27 ">0.2%", 28 "not dead", 29 "not op_mini all" 30 ], 31 "development": [ 32 "last 1 chrome version", 33 "last 1 firefox version", 34 "last 1 safari version" 35 ] 36 } 37}
エラー解消には何が必要でしょうか?
追記が必要な情報などもあればご教示ください。
よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。