Begrip: Route & Routes

De Routes en Route componenten uit react-router worden gebruikt om, op basis van de huidige URL, de juiste componenten te tonen.

De Routes component bevat één of meerdere Route componenten waarmee aangegeven wordt welke componenten getoond moeten worden voor welke route. Een Route component gebruikt de property path om de route te definiëren en de property element om de bijhorende component vast te leggen.

Als onderstaande code gerenderd wordt, zal slechts één van de drie pagina's (HomeComponent, AboutComponent, PricingComponent) getoond worden, afhankelijk van de huidige URL.

import {Routes, Route} from 'react-router'

const Routing: FunctionComponent = () => {
    return (
        <Routes>
            <Route path={'/'} element={<HomeComponent/>}/>
            <Route path={'/about'} element={<AboutComponent/>}/>
            <Route path={'/pricing'} element={<PricingComponent/>}/>
        </Routes>
    )
}