Maison > interface Web > js tutoriel > Pourquoi est-ce que je vois une page vierge dans mon application React ?

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

Susan Sarandon
Libérer: 2024-11-03 10:27:30
original
619 Les gens l'ont consulté

Why Am I Seeing a Blank Page in My React App?

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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>

  );

}

Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal