Ezt hogy lehet react-ben megcsinálni?

function App() {

return (

<>

<Router>

<Header />

<Routes>

<Route exact path='/' element={<Home />} />

<Route path='/alapszabalyok' element={<Befszabalyok />} />

<Route path='/fogalomtar' element={<Fogalomtar />} />

</Routes>

</Router>

</>

);

}

A <Header /> component egy olyan header, ami transparent és absolute pozíciójó. Ezt a header componentet szeretném használni a főoldalon.

A többi oldalon viszont <Headeralt /> componentet szeretném használni, ami egy teljesen másfajta header.

Hogyan tudom beállítani, hogy az egyik path-en az egyik header jelenjen meg, a másik path-en pedig a másik header?