React Router v6 にアップグレードした後、React アプリケーションに空白のページが表示されるのはなぜですか?

React アプリケーションの空白ページのトラブルシューティング

React アプリケーションを開発する場合、ページが空白のままになるという問題が時折発生し、ユーザーが困惑することがあります。この記事では、この問題の最も一般的な原因の 1 つを詳しく掘り下げ、解決策を提供します。

次のコード スニペットを考えてみましょう。

<code class="jsx">// App.js
import { Route } from "react-router-dom";
...
<Route exact path="/" component={Home} />
<Route path="/wallet" component={Wallet} /></code>

ご覧のとおり、コンポーネントを使用しています。 prop を使用して、Route 定義内のそれぞれの React コンポーネントをレンダリングします。ただし、React Router v6 では、これが大幅に変更されました。

React Router v6 では、Route コンポーネントは、コンポーネント prop の代わりに要素 prop を使用して、レンダリングされたコンテンツが子要素として渡されることを期待します。この微妙な違いにより、ページが空白のままになる可能性があります。

これを解決するには、コードを次のように更新する必要があります。

<code class="jsx">// App.js
import { Route } from "react-router-dom";
...
<Route exact path="/" element={<Home />} />
<Route path="/wallet" element={<Wallet />} /></code>

要素 prop を使用することで、React を渡します。これは React Router v6 の正しいアプローチです。

この変更を行うと、React アプリケーションは指定されたルート上に正しいコンテンツを表示し、イライラする空白ページの問題が解消されます。今後同様の問題が発生した場合は、使用している React Router のバージョンを再確認し、それに応じてコードを調整することで簡単に解決できるはずです。

以上がReact Router v6 にアップグレードした後、React アプリケーションに空白のページが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。