質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2103閲覧

react-route-domを使った時のエラー "Module not found: Can't resolve '<Routerをセットしたコンポネント>'"

lisateratail

総合スコア7

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/01/12 10:05

編集2020/01/13 08:39

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}

エラー解消には何が必要でしょうか?
追記が必要な情報などもあればご教示ください。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決済み
パスが通っていなかったと考えられる

投稿2020/01/14 23:54

lisateratail

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問