実現したいこと
Reactで画面遷移の実装を行ったところ、遷移後の画面が真っ白に表示されているので
正しい画面遷移が行われるように修正したいです。
前提
開発言語:React
開発環境:VS Code + Dev Containers
発生している問題・エラーメッセージ
画面遷移の実装を行ったところ、URLは変更され画面切り替えが行われるが真っ白な画面が表示される状態になります。
その状態でブラウザの更新を行うと正しく遷移後の画面が表示されるためURLの間違いやルーティングの間違いではないように見えます。
(知識不足のため、この認識自体が誤っている?)
該当のソースコード
遷移元画面
TypeScript
1import { useNavigate } from "react-router-dom"; 2 3export default function Test(): JSX.Element { 4 const navigate = useNavigate(); 5 return ( 6 <div> 7 <div>遷移元画面</div> 8 <button 9 type="button" 10 className="fortune_btn" 11 onClick={() => navigate("Test2")} 12 > 13 画面遷移 14 </button> 15 </div> 16 ); 17}
遷移先画面
TypeScript
1import React from "react"; 2 3export default function Test2(): JSX.Element { 4 return <div>遷移後画面</div>; 5}
ルーティング
TypeScript
1import { lazy } from "react"; 2import { Route, Routes as RrdRoutes } from "react-router-dom"; 3 4import { CssBaseline } from "@mui/material"; 5 6const Test = lazy(() => import("@pages/Test")); 7const Test2 = lazy(() => import("@pages/Test2")); 8 9export default function Routes() { 10 return ( 11 <> 12 <CssBaseline /> 13 <MetruckTheme> 14 <RrdRoutes> 15 <Route path="/" element={<Test />} /> 16 <Route path="/Test2" element={<Test2 />} /> 17 </RrdRoutes> 18 </MetruckTheme> 19 </> 20 ); 21} 22
main.tsx
TypeScript
1import React from "react"; 2import ReactDOM from "react-dom/client"; 3import { BrowserRouter } from "react-router-dom"; 4 5import axios from "axios"; 6 7import Routes from "./Routes"; 8 9/** 10 * axios Settings 11 */ 12axios.defaults.baseURL = 13 import.meta.env.VITE_API_URL ?? "http://localhost:3000"; 14axios.defaults.headers.common.Authorization = `${ 15 localStorage.getItem("token_type") ?? "Bearer" 16} ${localStorage.getItem("access_token") ?? ""}`; 17 18ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( 19 <React.StrictMode> 20 <BrowserRouter> 21 <Routes /> 22 </BrowserRouter> 23 </React.StrictMode> 24); 25
試したこと
下記ページを参考にpackage.jsonにhomepage項目を追記しましたが変化はありませんでした。
https://maaengineerhouse.com/archives/1822
回答2件
あなたの回答
tips
プレビュー