Begrip: useParams

De useParams hook geeft een object terug waarin elke parameter voor de actieve route beschikbaar is onder dezelfde naam als in de Route component die de parameter definieert. Naast de actieve route zijn ook alle parameters van parent routes beschikbaar.

Navigatieparameters worden via de URL doorgegeven en zijn dus altijd strings, als je een number doorgeeft, moeten de parameter eerste geconverteerd worden.

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

const Routing: FunctionComponent = () => {
  return (
     <Routes>
       <Route path={'/users'} element={<Outlet/>}>
         <Route index element={<Users/>}/>
         <Route path={':userId'} element={<Outlet/>}>
           <Route index element={<UserDetails/>}/>
           <Route path={':activityId'} element={<UserActivityDetails/>}/>
         </Route>
       </Route>
     </Routes>
  )
}

const UserActivityDetails: FunctionComponent = () => {
  const {userId, activityId} = useParams()
    
  return (
    <>
      ...
    </>
  )
}