React 画面遷移後に真っ白な画面が表示される

Question

実現したいこと

Reactで画面遷移の実装を行ったところ、遷移後の画面が真っ白に表示されているので
正しい画面遷移が行われるように修正したいです。

前提

開発言語：React
開発環境：VS Code ＋ Dev Containers

発生している問題・エラーメッセージ

画面遷移の実装を行ったところ、URLは変更され画面切り替えが行われるが真っ白な画面が表示される状態になります。
その状態でブラウザの更新を行うと正しく遷移後の画面が表示されるためURLの間違いやルーティングの間違いではないように見えます。
（知識不足のため、この認識自体が誤っている？）

該当のソースコード

遷移元画面

import { useNavigate } from "react-router-dom";

export default function Test(): JSX.Element {
  const navigate = useNavigate();
  return (
    <div>
      <div>遷移元画面</div>
      <button
        type="button"
        className="fortune_btn"
        onClick={() => navigate("Test2")}
      >
        画面遷移
      </button>
    </div>
  );
}

遷移先画面

import React from "react";

export default function Test2(): JSX.Element {
  return <div>遷移後画面</div>;
}

ルーティング

import { lazy } from "react";
import { Route, Routes as RrdRoutes } from "react-router-dom";

import { CssBaseline } from "@mui/material";

const Test = lazy(() => import("@pages/Test"));
const Test2 = lazy(() => import("@pages/Test2"));

export default function Routes() {
  return (
    <>
      <CssBaseline />
      <MetruckTheme>
        <RrdRoutes>
          <Route path="/" element={<Test />} />
          <Route path="/Test2" element={<Test2 />} />
        </RrdRoutes>
      </MetruckTheme>
    </>
  );
}

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import axios from "axios";

import Routes from "./Routes";

/**
 * axios Settings
 */
axios.defaults.baseURL =
  import.meta.env.VITE_API_URL ?? "http://localhost:3000";
axios.defaults.headers.common.Authorization = `${
  localStorage.getItem("token_type") ?? "Bearer"
} ${localStorage.getItem("access_token") ?? ""}`;

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  </React.StrictMode>
);

試したこと

下記ページを参考にpackage.jsonにhomepage項目を追記しましたが変化はありませんでした。
https://maaengineerhouse.com/archives/1822

Comments

[hoshi-takanori]

/corp/search に飛んでるのに、対応する Route が見当たらないような…。

[SparklingLemon]

すみません。
実際のコードから必要なコードのみ抜き出したところ、記載ミスがありました。
修正いたしました。

Answer 1

提示いただいた修正で思っていた動作が確認できました。ありがとうございます。
「React.Suspense」が何か分らなかったので調べてみたところ、

サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」できます。

との事なので、レンダリング待ちする必要があったようです。
原因もわかったため大変助かりました。
https://ja.reactjs.org/docs/react-api.html

Answer 2

React.Suspenseはどうでしょうか？

import { lazy, Suspense } from "react";
import { Route, Routes as RrdRoutes } from "react-router-dom";

import { CssBaseline } from "@mui/material";

const Test = lazy(() => import("@pages/Test"));
const Test2 = lazy(() => import("@pages/Test2"));

export default function Routes() {
  return (
    <>
      <CssBaseline />
      <MetruckTheme>
        <Suspense fallback={<div>読み込み中...</div>}>
          <RrdRoutes>
            <Route path="/" element={<Test />} />
            <Route path="/Test2" element={<Test2 />} />
          </RrdRoutes>
        </Suspense>
      </MetruckTheme>
    </>
  );
}