前提
初学者です。Codesandbox環境にてReactでいくつかのコンポーネントを作り、ページ遷移をしようとしているのですが、どうもエラーになってしまいます。検索して出てきた解決策をいくつか試しましたが、ダメでした。お優しい方、どうかお願いいたします。
実現したいこと
エラーが消えてページ遷移ができるようになる
発生している問題・エラーメッセージ
Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
該当のソースコード
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>React-test</title> </head> <body> <div id="root"></div> </body> </html>
index.js
import React from "react"; import ReactDom from "react-dom"; import App from "./App"; ReactDom.render(<App />, document.getElementById("root"));
App.jsx
import React from "react"; import { BrowserRouter, Link, Switch, Route } from "react-router-dom"; import { Home } from "./components/Home"; import { Page1 } from "./components/Page1"; import { Page2 } from "./components/Page2"; import { Page3 } from "./components/Page3"; export const App = () => { return ( <BrowserRouter> <div className="App"> <Link to="/">Home</Link> <br /> <Link to="/page1">Page1</Link> <br /> <Link to="/page2">Page2</Link> <br /> <Link to="/page3">Page3</Link> <br /> <Switch> {/* exactをつけると完全一致になります。Homeはexactをつけてあげます */} <Route exact path="/"> <Home /> </Route> <Route path="/page1"> <Page1 /> </Route> <Route path="/page2"> <Page2 /> </Route> <Route path="/page3"> <Page3 /> </Route> </Switch> </div> </BrowserRouter> ); };
Home.jsx
import React from "react"; export const Home = () => { return ( <div> <h1>Home</h1> </div> ); }; 同じような構成でPage1.jsx、Page2.jsx、Page3.jsxがあります。
試したこと
import文を少しいじってみたりしましたが、解決できませんでした。
補足情報（FW/ツールのバージョンなど）
react
17.0.2
react-dom
17.0.2
react-router-dom
6.3.0
react-scripts
4.0.0
0 コメント