React Router is een populaire routing bibliotheek die in React toepassingen wordt gebruikt om navigatie te beheren en naadloze routing functionaliteit te bieden. Maar zoals bij elke bibliotheek kunnen er in de loop der tijd updates en wijzigingen plaatsvinden, wat tot fouten kan leiden omdat sommige functies afgeschreven raken.
Een veel voorkomende fout die je kunt tegenkomen bij het implementeren van routing in React toepassingen is de “‘Switch’ is not exported from ‘react-router-dom'” fout.
Deze fout treedt op wanneer je een upgrade uitvoert van een oudere versie van React Router naar een nieuwere versie (momenteel v6) zonder rekening te houden met sommige afgeschreven componenten zoals <Switch>.
In dit artikel leer je de oorzaken van deze fout en hoe je hem kunt verhelpen, zodat je een soepele routing en navigatie in je React applicaties krijgt.
Wat veroorzaakt de fout “‘Switch’ is not exported from ‘react-router-dom'”?
In React Router versie 5 en eerder werd de component <Switch> gebruikt om alle routes in je React applicatie in te pakken. In React Router versie 6 is de <Switch> component afgeschreven en vervangen door de <Routes> component.
De <Routes> component in React Router v6 biedt een meer declaratieve en flexibele benadering van routing in vergelijking met de afgeschreven <Switch> component.
Als je dus onlangs een upgrade hebt uitgevoerd naar React Router v6 (of een nieuwere versie) en je probeert nog steeds de afgeschreven <Switch> component te gebruiken, zul je de “‘Switch’ is not exported from ‘react-router-dom'” fout tegenkomen.
2 manieren om de fout “‘Switch’ is not exported from ‘react-router-dom'” op te lossen
Deze fout kan op twee manieren worden opgelost, afhankelijk van de gewenste aanpak en eisen van je project. De twee manieren zijn als volgt:
- Gebruik <Routes> in plaats van <Switch>.
- Downgrade de react-router-dom versie naar 5 of lager
1. Gebruik <Routes> in plaats van <Switch>
Een manier om de fout “‘Switch’ is not exported from ‘react-router-dom'” op te lossen is door <Switch> te vervangen door <Routes>.
Laten we eens kijken naar een voorbeeld van hoe je je routing code kunt updaten van het gebruik van de afgeschreven <Switch> component in React Router versie 5 naar de nieuwe <Routes> component in React Router versie 6.
In React Router versie 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;In de bovenstaande code gebruiken we de <Switch> component om onze routes in te pakken. In React Router versie 6 moeten we onze routing code echter bijwerken om de <Routes> component te gebruiken en de bijgewerkte API te volgen.
Hier zie je hoe hetzelfde voorbeeld eruit zou zien in React Router versie 6 en verder:
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;Zoals je ziet hebben we de <Switch> component vervangen door de <Routes> component, en elke <Route> wordt nu gedefinieerd met behulp van de element prop in plaats van de component prop.
Voordelen van Routes ten opzichte van Switch in React Router v6
Met de release van React Router v6 heeft de introductie van de <Routes> component verschillende voordelen gebracht ten opzichte van de afgeschreven <Switch> component in eerdere versies.
Laten we eens kijken naar enkele voordelen van het gebruik van <Routes> voor het afhandelen van routing logica in je React applicaties.
1. Verbeterde geneste routing
<Routes> maakt verbeterde nested routeringsconfiguraties mogelijk in vergelijking met <Switch>. Met <Routes> kun je eenvoudig nested routes definiëren door <Route> componenten te nesten binnen andere <Route> componenten, waardoor het intuïtiever en georganiseerder is om complexe routingstructuren te hanteren.
Dit kan het beheer van routingslogica in grotere applicaties met meerdere niveaus van nested routes helpen vereenvoudigen.
<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. Dynamische routematching
<Routes> biedt meer flexibiliteit bij het dynamisch matchen en renderen van routes op basis van routeparameters. Dit maakt meer dynamische en gegevensgestuurde routing in je applicatie mogelijk.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/users/:userId" element={<UserProfile />} />
<Route path="/products/:productId" element={<ProductDetail />} />
</Routes>3. Verbeterde foutafhandeling
<Routes> biedt verbeterde foutafhandeling voor niet gevonden routes. Als een route niet wordt gevonden, geeft <Routes> automatisch een “Not found” component weer of een aangepaste foutcomponent die je kunt definiëren.
Dit kan de gebruikerservaring helpen verbeteren door ongeldige URL’s of routes die niet bestaan in je applicaties netjes af te handelen.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
{/* Error route */}
<Route path="*" element={<NotFound />} />
</Routes>2. Downgrade de react-router-dom versie naar 5 of lager
Als je liever <Switch> blijft gebruiken in je project, kun je de fout oplossen door je react-router-dom versie te downgraden naar 5 of lager.
Dit kan een haalbare oplossing zijn als je een bestaand project hebt dat is gebouwd met een oudere versie van React Router. Je kunt dit doen door eerst de laatste versie van React router die je hebt geïnstalleerd te verwijderen met het onderstaande commando:
npm uninstall react-router-domJe kunt dit commando nu gebruiken om de laatste major versie te installeren die de component <Switch> bevatte, namelijk versie 5.2.0:
npm install [email protected]Samenvatting
In dit artikel heb je geleerd over de fout “‘Switch’ is not exported from ‘react-router-dom'” in React en een paar manieren verkend om dit op te lossen. Je hebt ook de voordelen geleerd van het gebruik van het nieuwere <Routes> component boven het afgeschreven <Switch> component.
Als je een nieuw project begint, is het aan te raden om altijd de nieuwste versie van React Router te gebruiken, omdat die aanzienlijke verbeteringen en voortdurende updates biedt.
Stel echter dat je aan een bestaand project werkt, en niet de tijd hebt om je code uitgebreid bij te werken om de nieuwe React Router’s v6 syntaxis en componenten te gebruiken. Blijf in dat geval de oudere versie van React Router gebruiken die met jouw code werkt.
Nu is het jouw beurt: Ben je dit probleem ooit tegengekomen? Hoe heb je het opgelost? Zijn er andere benaderingen die je hebt gebruikt die niet in dit artikel zijn behandeld? Laat het ons weten in de comments!
