Pourquoi mon application React affiche-t-elle une page vierge ?

Page blanche dans React : un guide de dépannage

Lorsque vous travaillez avec React, rencontrer une page blanche peut être frustrant. Ce problème survient souvent en raison d'une mauvaise compréhension du fonctionnement du routage dans React-router-dom. Examinons un cas spécifique et fournissons une solution détaillée pour résoudre le problème de la page blanche.

Énoncé du problème :

Considérez l'application React suivante :

<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>

Lors de la navigation vers http://localhost:3001/ ou http://localhost:3001/wallet, la page reste vide.

Solution :

Dans les versions récentes de react-router-dom, le composant prop de Route a été remplacé par le element prop. L'élément prop prend un élément React comme valeur, ce qui signifie que les composants doivent être transmis en tant qu'éléments JSX au lieu de références à des composants.

Pour résoudre le problème, modifiez le fichier App.js comme suit :

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

En effectuant cette modification, les composants (Accueil et Portefeuille) sont désormais transmis en tant qu'éléments React à l'élément prop, et l'application devrait maintenant restituer les pages attendues.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!