Begrip: Navigatie parameter

Een navigatie parameter wordt aan een route toegevoegd via een dubbelpunt. Stel dat we een parameter willen toevoegen aan het pad /voorbeeld, dan kunnen we dit noteren als /voorbeeld/:param1. De string 'param1' is hier de naam naam waaronder we de parameter willen uitlezen, je gebruikt dus beter een meer betekenisvolle naam.

Deze notatie kan uitgebreid worden naar meerdere parameters: /voorbeeld/:param1/:param2.

Een route met een navigatie parameter kan gedefinieerd wordt als één geheel, of als relatief kind van een andere route.

Route als één geheel.

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

const Routing: FunctionComponent = () => {
    return (
        <Routes>
            <Route path={'/example/:param1'} element={<SomeComponent/>}/>
        </Routes>
    )
}

Relatieve parameter

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

const Routing: FunctionComponent = () => {
    return (
        <Routes>
            <Route path={'/example'} element={<SomeOtherComponent/>}>
                <Route path={':param1'} element={<SomeComponent/>}/>
            </Route>
        </Routes>
    )
}

:::