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

React の空白ページ: 間違いを明らかにする

React の開発に着手すると、最初に空白ページが表示されるというイライラする問題に遭遇することがあります。アプリケーションに移動します。このレンダリング問題の根本原因を特定するには、コードを徹底的に調査する必要があります。

この例では、提供されている React アプリケーションは、ページ間のルーティングに「react-router-dom」パッケージを使用しています。 App.js の Route コンポーネントを調べると、ライブラリの以前のバージョンの古い構文が使用されていることがわかります。

react-router-dom@6 では、ルーティングされたコンテンツのレンダリングが、 「コンポーネント」プロパティを「要素」プロパティに変更します。この変更により、コンポーネントをコンポーネントとして参照するのではなく、「element」プロパティ内で JSX として渡す必要があります。

問題を修正するには、App.js ファイルを変更して次の構文を組み込みます。

import {BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import { Home } from './components/Home';
import { Wallet } from './components/Wallet';

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

この調整を行うことで、コンポーネントは JSX 構造内で正しくレンダリングされ、ホーム ページとウォレット ページが適切に表示されるようになります。

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