Pourquoi est-ce que je vois une page vierge dans mon application React ?

Page blanche dans React : découvrir l'erreur

Lorsque l'on se lance dans le développement de React, on peut rencontrer le problème frustrant de rencontrer une page blanche lors accéder à leur application. Identifier la cause première de ce problème de rendu nécessite un examen approfondi du code.

Dans ce cas, l'application React fournie utilise le package "react-router-dom" pour le routage entre les pages. En examinant les composants Route dans App.js, nous remarquons qu'ils utilisent la syntaxe obsolète d'une version antérieure de la bibliothèque.

Dans réagir-router-dom@6, le rendu du contenu routé est passé de l'utilisation le accessoire "composant" au accessoire "élément". Cette modification nécessite de transmettre les composants en tant que JSX dans la prop "element" plutôt que de les référencer en tant que composants.

Pour corriger le problème, modifiez le fichier App.js pour incorporer cette syntaxe :

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>
  );
}

En effectuant cet ajustement, les composants sont restitués correctement au sein de la structure JSX, assurant l'affichage approprié des pages Accueil et Wallet.

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!