1. React Router ist eine beliebte Routing-Bibliothek, die in React-Anwendungen verwendet wird, um die Navigation zu verwalten und nahtlose Routing-Funktionen bereitzustellen. Wie bei jeder Bibliothek können jedoch im Laufe der Zeit Aktualisierungen und Änderungen vorgenommen werden, was zu Fehlern führen kann, weil einige Funktionen veraltet sind.

Ein häufiger Fehler, auf den du bei der Implementierung von Routing in React-Anwendungen stoßen kannst, ist der Fehler ‚Switch‘ is not exported from ‚react-router-dom‘.

Dieser Fehler tritt auf, wenn du von einer älteren Version von React Router auf eine neuere Version (derzeit v6) aktualisierst, ohne dabei einige veraltete Komponenten wie <Switch> zu berücksichtigen.

In diesem Artikel erfährst du die Ursachen für diesen Fehler und wie du ihn beheben kannst, um ein reibungsloses Routing und eine gute Navigation in deinen React-Anwendungen zu gewährleisten.

Was ist die Ursache für den Fehler „‚Switch‘ wird nicht von ‚react-router-dom‘ exportiert“?

In React Router Version 5 und früher wurde die Komponente <Switch> verwendet, um alle Routen in deiner React-Anwendung zu verpacken. In React Router Version 6 ist die Komponente <Switch> veraltet und wurde durch die Komponente <Routes> ersetzt.

Die <Routes> Komponente im React Router v6 bietet einen deklarativen und flexibleren Ansatz für das Routing im Vergleich zur veralteten <Switch> Komponente.

Wenn du also kürzlich auf React Router v6 (oder eine neuere Version) aktualisiert hast und immer noch versuchst, die veraltete Komponente <Switch> zu verwenden, wirst du den Fehler ‚Switch‘ is not exported from ‚react-router-dom‘ erhalten.

Switch' is not exported from 'react-router-dom Fehlermeldung
Switch‘ wird nicht von ‚react-router-dom‘ exportiert

2 Wege zur Behebung des Fehlers „‚Switch‘ wird nicht aus ‚react-router-dom‘ exportiert“

Dieser Fehler kann auf zwei Arten behoben werden, je nach gewünschter Vorgehensweise und den Anforderungen deines Projekts. Die beiden Wege sind wie folgt:

  • Verwende <Routes> anstelle von <Switch>
  • Downgrade der react-router-dom Version auf 5 oder niedriger

1. Verwende <Routes> anstelle von <Switch>

Eine Möglichkeit, den Fehler „‚Switch‘ wird nicht von ‚react-router-dom‘ exportiert“ zu beheben, besteht darin, <Switch> durch <Routes> zu ersetzen.

Schauen wir uns ein Beispiel an, wie du deinen Routing-Code von der veralteten <Switch> Komponente in React Router Version 5 auf die neue <Routes> Komponente in React Router Version 6 aktualisieren kannst.

In React Router Version 5:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

Im obigen Code verwenden wir die Komponente <Switch>, um unsere Routen zu verpacken. In React Router Version 6 müssen wir jedoch unseren Routing-Code aktualisieren, um die Komponente <Routes> zu verwenden und die aktualisierte API zu befolgen.

Hier siehst du, wie das gleiche Beispiel in React Router Version 6 und höher aussehen würde:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

Wie du siehst, haben wir die Komponente <Switch> durch die Komponente <Routes> ersetzt, und jedes <Route> wird jetzt mit der Requisite element statt mit der Requisite component definiert.

Vorteile von Routes gegenüber Switch in React Router v6

Mit der Veröffentlichung von React Router v6 hat die Einführung der Komponente <Routes> einige Vorteile gegenüber der veralteten Komponente <Switch> in früheren Versionen gebracht.

Schauen wir uns einige Vorteile von <Routes> für die Handhabung der Routing-Logik in deinen React-Anwendungen an.

1. Verbessertes Nested Routing

<Routes> ermöglicht im Vergleich zu <Switch> verbesserte verschachtelte Routing-Konfigurationen. Mit <ROutes> kannst du einfach verschachtelte Routen definieren, indem du <Route> -Komponenten innerhalb anderer <Route> -Komponenten verschachtelst, was die Handhabung komplexer Routing-Strukturen intuitiver und organisierter macht.

Dies kann die Verwaltung der Routing-Logik in größeren Anwendungen mit mehreren Ebenen von verschachtelten Routen vereinfachen.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />}>
    <Route path="/team" element={<Team />} />
    <Route path="/history" element={<History />} />
  </Route>
  <Route path="/contact" element={<Contact />} />
</Routes>
2. Dynamisches Routenmatching

<Routes> bietet mehr Flexibilität bei der dynamischen Anpassung und Darstellung von Routen auf der Grundlage von Routenparametern. Dies ermöglicht ein dynamischeres und datengesteuertes Routing in deiner Anwendung.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users/:userId" element={<UserProfile />} />
  <Route path="/products/:productId" element={<ProductDetail />} />
</Routes>
3. Verbesserte Fehlerbehandlung

<Routes> bietet eine verbesserte Fehlerbehandlung für nicht gefundene Routen. Wenn eine Route nicht gefunden wird, zeigt <Routes> automatisch eine „Nicht gefunden“-Komponente oder eine benutzerdefinierte Fehlerkomponente an, die du definieren kannst.

Dies kann dazu beitragen, die Benutzerfreundlichkeit zu verbessern, indem ungültige URLs oder Routen, die in deiner Anwendung nicht existieren, elegant behandelt werden.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  {/* Error route */}
  <Route path="*" element={<NotFound />} />
</Routes>

2. Downgrade der react-router-dom Version auf 5 oder niedriger

Wenn du <Switch> weiterhin in deinem Projekt verwenden möchtest, kannst du den Fehler beheben, indem du deine react-router-dom Version auf 5 oder niedriger herabstufst.

Dies kann eine praktikable Lösung sein, wenn du ein bestehendes Projekt hast, das mit einer älteren Version von React Router erstellt wurde. Dazu deinstallierst du zunächst die letzte Version von React Router, die du mit dem folgenden Befehl installiert hast:

npm uninstall react-router-dom

Mit diesem Befehl kannst du nun die letzte Hauptversion installieren, die die <Switch>-Komponente enthält, also Version 5.2.0:

npm install [email protected]

Zusammenfassung

In diesem Artikel hast du die Fehlermeldung „‚Switch‘ wird nicht von ‚react-router-dom‘ exportiert“ in React kennengelernt und einige Möglichkeiten zur Behebung des Problems erkundet. Außerdem hast du erfahren, welche Vorteile die neuere Komponente <Routes> gegenüber der veralteten Komponente <Switch> hat.

Wenn du ein neues Projekt beginnst, ist es empfehlenswert, immer die neueste Version von React Router zu verwenden, da sie erhebliche Verbesserungen und kontinuierliche Updates bietet.

Angenommen, du arbeitest an einem bestehenden Projekt und hast nicht die Zeit, deinen Code umfassend zu aktualisieren, um die neue Syntax und die Komponenten von React Router v6 zu verwenden. In diesem Fall kannst du weiterhin die ältere Version des React Routers verwenden, die mit deinem Code funktioniert.

Jetzt bist du dran: Bist du schon einmal auf dieses Problem gestoßen? Wie hast du es gelöst? Gibt es andere Lösungsansätze, die du verwendet hast und die in diesem Artikel nicht behandelt werden? Lass es uns in den Kommentaren wissen!