Comment résoudre la page d'erreur de réaction vierge

Solution à la page d'erreur de réaction vierge : 1. Déplacez la route racine vers le bas de l'étiquette Switch ; 2. Vérifiez si le composant supérieur contient le mot-clé exact et supprimez-le s'il contient le mot-clé ; documentation du composant, redirigez simplement dans le sous-composant de niveau supérieur.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment résoudre le problème de la page d'erreur de réaction vierge ?

Problème de page vierge de réaction

Préface

Parfois, lorsque nous utilisons le module React-Router pour changer d'itinéraire, la page sera vide cette fois, nous expliquerons clairement la situation et la résoudrons.

Problèmes

Ci-dessous, nous téléchargeons directement le code problématique :

<Switch>
    <Route path={"/"} component={loadable(() => import("./App.jsx"))} />
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home.jsx"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login.jsx"))} />
</Switch>

Ce code est l'un de ceux que nous utilisons souvent. En fait, il est très simple de résoudre le problème de page blanche de ce genre de code, c'est-à-dire. directement dans la balise Route Ajoutez-lui le champ exact et utilisez des règles de correspondance forcée pour faire correspondre le routage avec les composants de la page. Cependant, lors de l'utilisation d'exact, la page secondaire ne correspondra pas.

Étant donné que les règles de correspondance de React-Router correspondent de haut en bas dans l'étiquette Switch, lorsque la route doit passer à la route d'origine, elle correspond d'abord au chemin racine de la route actuelle. Le chemin racine peut correspondre à n'importe lequel des. les routes. Routage secondaire, mais comme le chemin racine n'a pas de page liée, il sera vide.

Solution

Ce problème peut être facilement résolu

<Switch>
    <Route path={"/home"} component={loadable(() => import("./views/Home/Home"))} />
    <Route path={"/login"} component={loadable(() => import("./views/Login/Login"))} />
  <Route exact path={"/"} component={loadable(() => import("./App.jsx"))} />
</Switch>

Regardez le code ci-dessus et déplacez la route racine vers le bas de l'étiquette Switch.

En raison des règles de correspondance de l'étiquette Switch, le chemin racine sera mis en correspondance uniquement lorsque d'autres routes secondaires ne peuvent pas être mises en correspondance, et le champ de correspondance forcée exacte est ajouté au chemin racine afin que le chemin racine puisse être forcé à correspondre. Cet itinéraire comporte également des itinéraires secondaires et le champ exact peut être supprimé.

Utilisez réagir-router-config

Lors de l'utilisation de packages de modules de gestion de routage réactif tels que réagir-router-config, il est très facile d'avoir un phénomène d'écran blanc en raison de la méconnaissance du routage réactif et des tiers. packages de modules causés par une méconnaissance.

const routes = [
  {
    path: "/",
    component: Home,
    routes: [
      {
        path: "/",
        render: () => <Redirect to="/user" />
      },
      {
        path: "/user",
        component: User,
        exact: true
      },
      {
        path: "/content",
        component: Content,
        exact: true
      }
    ]
  },
  {
    path: "/login",
    component: Login,
    exact: true
  }
]

À l'heure actuelle, de nombreux facteurs peuvent rendre la page blanche. Nous ne parlerons que des trois plus distinctifs.

• Vide lors de la redirection

La redirection de react-router-config est un peu différente de la redirection du routage personnalisé Il redirige dans son sous-composant de niveau supérieur

• page Vide lors du rendu

.

La page est vide en ce moment pour la même raison que celle mentionnée ci-dessus. Vérifiez simplement si le composant supérieur du composant contient le mot-clé exact, supprimez-le. le problème ne peut pas être résolu, vérifiez si la route et le composant correspondent correctement (si le mot-clé exact est ajouté à la sous-route, si la route est correctement imbriquée, si tous les chemins sont écrits correctement, si le composant est exporté correctement, etc. ).

• La troisième et la plus simple méthode consiste à utiliser la mauvaise méthode et à ne pas rediriger dans le sous-composant de niveau supérieur selon le document du composant.

À ce stade

Pour ce problème, vous devez d'abord analyser la clé du problème, puis localiser l'endroit précis où le problème se produit, et enfin le résoudre.

C'est la bonne façon de résoudre un problème

Apprentissage recommandé : "Tutoriel vidéo React"

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!