So lösen Sie den Reaktionsfehler „Seite leer“.

Lösung für die leere Reaktionsfehlerseite: 1. Verschieben Sie die Root-Route an den unteren Rand des Switch-Labels. 2. Überprüfen Sie, ob die obere Komponente das genaue Schlüsselwort enthält, und entfernen Sie sie, wenn sie das Schlüsselwort enthält Dokumentation der Komponente. Leiten Sie einfach in die Unterkomponente der obersten Ebene um.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie kann das Problem einer leeren Reaktionsfehlerseite gelöst werden?

React-Seite leer Problem

Vorwort

Manchmal ist die Seite leer, wenn wir das React-Router-Modul verwenden, um die Route zu wechseln. Dieses Mal werden wir die Situation klar erklären und lösen.

Probleme

Nachfolgend laden wir den problematischen Code direkt hoch:

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

Dieser Code ist einer von denen, die wir häufig verwenden. Tatsächlich ist es sehr einfach, das Problem der leeren Seiten dieser Art von Code zu lösen, d. h. Direkt im Route-Tag fügen Sie das Feld „exact“ hinzu und verwenden die Regeln für den erzwungenen Abgleich, um das Routing mit den Seitenkomponenten abzugleichen. Bei Verwendung von „exact“ stimmt die sekundäre Seite jedoch nicht überein.

Da die Übereinstimmungsregeln des React-Routers im Switch-Label von oben nach unten übereinstimmen, stimmt die Route, wenn sie zur Home-Route springen muss, zunächst mit dem Root-Pfad der aktuellen Route überein. Der Root-Pfad kann mit jedem übereinstimmen Sekundäres Routing, aber da der Stammpfad keine gebundene Seite hat, ist er leer.

Lösung

Dieses Problem kann leicht gelöst werden

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

Schauen Sie sich den obigen Code an und verschieben Sie die Root-Route an den unteren Rand des Switch-Labels.

Aufgrund der Übereinstimmungsregeln des Switch-Labels wird der Root-Pfad nur dann abgeglichen, wenn andere sekundäre Routen nicht abgeglichen werden können, und das Feld für die genaue erzwungene Übereinstimmung wird dem Root-Pfad hinzugefügt, sodass die Übereinstimmung des Root-Pfads erzwungen werden kann. Diese Route verfügt auch über Nebenrouten und das genaue Feld kann entfernt werden.

Verwenden Sie React-Router-Config

Bei der Verwendung von React-Routing-Verwaltungsmodulpaketen wie React-Router-Config kann es sehr leicht zu einem White-Screen-Phänomen kommen. Dies liegt daran, dass Sie mit React-Routing und Drittanbietern nicht vertraut sind Modulpakete aufgrund von Unbekanntheit.

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

Zu diesem Zeitpunkt gibt es viele Faktoren, die dazu führen können, dass die Seite leer ist. Wir werden nur auf die drei auffälligsten eingehen.

• Leer beim Umleiten

Die Umleitung von „react-router-config“ unterscheidet sich ein wenig von der Umleitung des benutzerdefinierten Routings. Sie leitet in der Unterkomponente der obersten Ebene um. Seite „Leer beim Rendern“

• Die Seite ist zu diesem Zeitpunkt aus dem gleichen Grund wie oben erwähnt. Überprüfen Sie einfach, ob die obere Komponente das Schlüsselwort enthält. Wenn sie zu diesem Zeitpunkt noch leer ist Das Problem kann nicht gelöst werden. Überprüfen Sie, ob Route und Komponente erfolgreich übereinstimmen (ob das genaue Schlüsselwort zur Unterroute hinzugefügt wurde, ob die Route korrekt verschachtelt ist, ob alle Pfade korrekt geschrieben sind, ob die Komponente korrekt exportiert wurde usw. ).

Die dritte und einfachste Methode besteht darin, die falsche Methode zu verwenden und nicht gemäß dem Dokument der Komponente in der Unterkomponente der obersten Ebene umzuleiten.

• An diesem Punkt

Bei diesem Problem sollten Sie zunächst den Schlüssel zum Problem analysieren, dann den spezifischen Ort lokalisieren, an dem das Problem auftritt, und es schließlich lösen.

So löst man ein Problem richtig

Lernempfehlung: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo lösen Sie den Reaktionsfehler „Seite leer“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!