In ReactJS gebruiken we meestal de `react-router-dom` bibliotheek om te navigeren tussen verschillende routes. Er zijn verschillende manieren om overgangen tussen routes te hanteren.
1. Gebruik de `
```
import { BrowserRouter as Router, Switch, Route } from “react-router-dom”;
function App() {
return (
}
```
In dit voorbeeld zal navigeren naar `www.jouwwebsite.com/route1` de `Route1` component renderen, en navigeren naar `www.jouwwebsite.com/route2` zal de `Route2` component renderen.
1. Gebruik de `Link` of `NavLink` componenten: Om gebruikers toe te staan te navigeren tussen routes, kan je de `Link` of `NavLink` componenten gebruiken. Deze componenten renderen een `` element in de DOM en sturen de gebruiker naar een nieuwe route wanneer erop wordt geklikt.
```
import { Link } from “react-router-dom”;
function Navigation() {
return (
);
}
```
1. Gebruik de `useHistory` hook voor programmatische navigatie: Soms moet je de gebruiker programmatisch naar een nieuwe route sturen, zoals na een formulier is ingezonden. Dit kan worden bereikt met de `useHistory` hook.
```
import { useHistory } from “react-router-dom”;
function Form() { let history = useHistory();
function handleSubmit() { // Submit code here // Navigate to a new route after form is submitted history.push(“/new-route”); } return ( ); } ```Voor overgangseffecten tussen routes kan je pakketten zoals `react-transition-group` gebruiken.
