React Router is een belangrijk onderdeel van elke React-applicatie waarmee je verschillende pagina’s en routes van je app kan aanmaken en beheren.
Hier is een basismethode om navigatie uit te voeren met React Router.
1. Installeer React Router in je project:
Open de terminal in je projectmap en typ het volgende: \`\`\`bash npm install react-router-dom \`\`\`1. Importeer de benodigde componenten van React Router:
\`\`\`js import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’; \`\`\`1. Omzeil je app met de `Router` component van React Router:
\`\`\`js function App() { return (1. Gebruik de `Route` component om verschillende routes te definiëren.
Elke `Route` component heeft tenminste een `path` prop om het pad van de URL te definiëren en hoeft alleen te worden weergegeven als het `path` prop overeenkomt met de huidige URL. Daarnaast heeft het een `component` prop om te definiëren welk component moet worden weergegeven als de route overeenkomt. \`\`\`js function App() { return (1. Het `Switch` component moet worden gebruikt om te zorgen dat slechts één route tegelijk wordt weergegeven:
\`\`\`js function App() { return (1. Gebruik de `Link` component van React Router om navigatielinks te maken. Deze component werkt vergelijkbaar met een normale `` tag, maar in plaats van een `href` prop, gebruik je een `to` prop om het doelpad van de link te definiëren.
\`\`\`js import { Link } from ‘react-router-dom’; function Navigation() { return ( ); } \`\`\`React Router zorgt voor een naadloze navigatie in je react applicaties zonder de pagina te hoeven herladen. Het biedt ook geavanceerdere functies zoals geneste routes, routebeveiliging en routeparameters.
