Begrip: Outlet

De Outlet component wordt gebruikt om geneste routes weer te geven. Zonder deze component wordt enkel de parent route getoond en worden kinderen genegeerd.

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

const Routing: FunctionComponent = () => {
  return (
    <Routes>
      <Route path={'/foo'} element={<Foo/>}>
        <Route path={'/bar'} element={<Baz/>}/>
        <Route path={':param1'} element={<Qux/>}/>
      </Route>
    </Routes>
  )
}

const Foo: FunctionComponent = () => {
  return (
    <>
      <h1>Foo</h1>
      {/**
        * De code hierboven worden altijd gerenderd,
        * omdat deze in de Foo (parent) component zit. 
        * De Baz en Qux componenten worden nooit getoond, 
        * tenzij er ergens een <Outlet/> gebruikt wordt.  
        */}
      <Outlet/>
    </>    
  )
}