React Authentication By Example: React Router 6

Thanks @konrad.sopala.

For reference: I’m currently passing my components through Routes the following way:

<Route path='/:siteID/history/*' element={<History data={{siteID, stateID, cityID}} customerID={''}/>} />
<Route path='/:siteID/history/:page' element={<History data={{siteID, stateID, cityID}} customerID={''}/>} />

I’d never before seen examples of nesting Route elements with components while properly passing props in React 18 / Router 6, especially with <AuthenticationGuard>.

My question here is how are props passed when changing “element={<History” to “element={History}”?