反応エラーページが空白の場合の解決方法

空の反応エラー ページの解決策: 1. ルート ルートをスイッチ ラベルの一番下に移動します; 2. 上のコンポーネントに正確なキーワードが含まれているかどうかを確認し、キーワードが含まれている場合は削除します; 3コンポーネントのドキュメントは、最上位のサブコンポーネントにリダイレクトできます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応で空白のエラーページを解決するにはどうすればよいですか?

React ページ空白の問題

はじめに

react-router モジュールを使用して切り替えを行うと、時々問題が発生します。ルート ページが真っ白になることがありますが、今回は状況をわかりやすく説明して解決します。

発生する問題

以下、問題のあるコードに直接進みます:

<Switch>
    <Route path={"/"} component={loadable(() => import("./App.jsx"))} />
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home.jsx"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login.jsx"))} />
</Switch>

このコードは、私たちがよく使用するコードの 1 つです。この種のコード ページ空白の問題は非常に単純で、ルート タグに正確なフィールドを直接追加し、強制一致ルールを使用してルートとページ コンポーネントを一致させるだけですが、正確を使用すると、2 番目のページは一致しません。

react-router のマッチング ルールはスイッチ ラベルの上から下まで一致するため、ルートがホーム ルートにジャンプする必要がある場合、まず現在のルートのルート パスと一致します。このルートの下にあるセカンダリ ルートのいずれかと一致しますが、ルート パスにはバインドされたページがないため、空白になります。

解決策

この問題は簡単に解決できます。

<Switch>
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login"))} />
  <Route exact path={"/"} component={loadable(() => import("./App.jsx"))} />
</Switch>

上記のコードを見て、ルート ルートをスイッチ ラベルの内側に移動します。一番下で解決できます。

スイッチ ラベルの一致ルールにより、ルート パスは、他のセカンダリ ルートが一致できない場合にのみ一致し、ルート パス A が一致するように、正確な必須一致フィールドがルート パスに追加されます。強制することができます。このルートにはセカンダリ ルートもあり、正確なフィールドは削除できます。

react-router-config の使用

react-router-config などの反応ルーティング管理モジュール パッケージを使用すると、ホワイト スクリーン現象が発生しやすくなります。これは、反応ルーティングとサードパーティのモジュール パッケージに対する不慣れが原因で発生するためです。

const routes = [
  {
    path: "/",
    component: Home,
    routes: [
      {
        path: "/",
        render: () => <Redirect to="/user" />
      },
      {
        path: "/user",
        component: User,
        exact: true
      },
      {
        path: "/content",
        component: Content,
        exact: true
      }
    ]
  },
  {
    path: "/login",
    component: Login,
    exact: true
  }
]

現時点では、ページが空白になる要因は多数ありますが、最も特徴的な 3 つの要因についてのみ説明します。

• リダイレクト時に空白になる

react-router-config のリダイレクトは、カスタム ルーティングのリダイレクトとは少し異なります。

• 最上位のサブコンポーネントでリダイレクトされるページは、レンダリング時に空白になります

この時点で空白のページは、実際には上記と同じ理由です。はほぼ同じです。コンポーネントの上位コンポーネントに正確なキーワードが含まれているかどうかだけを確認する必要があります。キーワードが含まれている場合は削除します。この時点で問題が解決できない場合は、ルートとコンポーネントが正常に実行されているかどうかを確認してください一致 (サブルート内にあるかどうか)。正確なキーワードを追加するか、ルーティングが正しくネストされているかどうか、すべてのパスが正しく記述されているかどうか、コンポーネントが正しくエクスポートされているかどうかなど)。

• 3 番目の最も単純な方法は、間違った方法を使用し、コンポーネントのドキュメントに従ってトップレベルのサブコンポーネントでリダイレクトしないことです。

この時点で

#この問題では、まず問題の鍵を分析し、次に問題が発生する特定の場所を特定し、最後にそれを解決する必要があります。

これは問題を解決する正しい方法です

推奨される学習: 「

react ビデオ チュートリアル 」

以上が反応エラーページが空白の場合の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。