React アプリに空白のページが表示されるのはなぜですか?

React の空白ページ: トラブルシューティング ガイド

React を使用する場合、空白ページに遭遇するとイライラすることがあります。この問題は、React-router-dom でのルーティングの仕組みについての誤解が原因で発生することがよくあります。特定のケースを掘り下げて、空白ページの問題を解決するための詳細な解決策を提供しましょう。

問題ステートメント:

次の React アプリケーションを考えてみましょう:

<code class="javascript">// App.js
function App() {
  return (
      <Router>
        <Routes>
          <Route path="/" component={Home} />
          <Route path="/wallet" component={Wallet} />
        </Routes>
      </Router>
  );
}</code>

<code class="javascript">// Wallet.js
export function Wallet() {
  return (
    <div>
      <h1>Wallet Page!</h1>
    </div>
  );
}</code>

<code class="javascript">// Home.js
export function Home() {
  return (
    <div>
      <h1>Home Page!</h1>
    </div>
  );
}</code>

http://localhost:3001/ に移動する場合、またはhttp://localhost:3001/wallet、ページは空白のままです。

解決策:

react-router-dom の最近のバージョンでは、Route のコンポーネント prop要素 prop に置き換えられました。要素 prop は値として React 要素を受け取ります。つまり、コンポーネントはコンポーネントへの参照ではなく JSX 要素として渡される必要があります。

この問題を解決するには、App.js ファイルを次のように変更します。

<code class="javascript">// App.js
function App() {
  return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/wallet" element={<Wallet />} />
        </Routes>
      </Router>
  );
}</code>

この変更を行うことにより、コンポーネント (Home と Wallet) が React 要素として要素 prop に渡されるようになり、アプリケーションは期待どおりにレンダリングするようになります。ページ。

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