反応エラーページが空白の場合の解決方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2023-01-04 16:45:42

オリジナル

1732 人が閲覧しました

空の反応エラーページの解決策: 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 のリダイレクトは、カスタムルーティングのリダイレクトとは少し異なります。

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

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