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

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

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

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

Q&A

解決済

2回答

1598閲覧

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

SparklingLemon

総合スコア10

React.js

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

1グッド

1クリップ

投稿2023/03/29 04:06

編集2023/03/29 07:03

実現したいこと

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

y-temp4👍を押しています

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

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

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

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

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

hoshi-takanori

2023/03/29 06:00

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

2023/03/29 07:07 編集

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

回答2

0

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

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

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

投稿2023/04/03 01:56

SparklingLemon

総合スコア10

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

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

0

ベストアンサー

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

tsx

1import { lazy, Suspense } 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 <Suspense fallback={<div>読み込み中...</div>}> 15 <RrdRoutes> 16 <Route path="/" element={<Test />} /> 17 <Route path="/Test2" element={<Test2 />} /> 18 </RrdRoutes> 19 </Suspense> 20 </MetruckTheme> 21 </> 22 ); 23}

投稿2023/03/31 07:40

y-temp4

総合スコア67

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問