使用しているOS・バージョンは以下です
OS:mac
├── react-dom@17.0.2
├── react-router-dom@6.4.0
└── react@17.0.2
■質問内容
Reactで簡単なページ遷移を実装しようとしたところ、ローカル環境のブラウザ上に何も描画されなくなりました
return文の中身を以下のようにhタグとコンポーネントのみに変えたところ問題なく表示されたので
ルーティングの記述に問題があると思われます
import React from "react"; import Home from "./components/Home.jsx"; import Details from "./components/Details.jsx"; const App = () => { return ( <> <h1>test</h1> <Home /> <Details /> </> ); } export default App;
結果
どこが間違っているのかご指摘いただけないでしょうか。
実現したいこと
ルーティングの設定を正常に行いたい
発生している問題・エラーメッセージ
ルーティングの記述後、ローカル環境のブラウザ上に何も描画されない
エラーメッセージはありません
該当のソースコード
App.js
import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./components/Home.jsx"; import Details from "./components/Details.jsx"; export const App = () => { return ( <BrowserRouter> <Routes> <Route path={`/`} element={<Home />} /> <Route path={`/details/`} element={<Details />} /> </Routes> </BrowserRouter> ); };
Home.jsx
import React from "react"; function Home(){ return <h1>Home</h1>; }; export default Home;
Deails.jsx
import React from "react"; function Details() { return <h1>Details</h1>; } export default Details;
試したこと
react router dom v6の参考記事を参照
▼以下の記事の内容をそれぞれ実行しています
https://zenn.dev/longbridge/articles/65355d3fdb7939
https://www.webopixel.net/javascript/1773.html
https://reffect.co.jp/react/react-router-6
補足情報(FW/ツールのバージョンなど)
使用しているOS・バージョンは以下です
OS:mac
├── react-dom@17.0.2
├── react-router-dom@6.4.0
└── react@17.0.2
また、npm run build, npm startでも同様に何も描画されないので
ビル後のパスが異なるという要因は該当しなさそうです

回答1件
あなたの回答
tips
プレビュー