xxxxxxxxxx
import { Outlet } from 'react-router-dom';
const AppLayout = () => (
<>
<NavBar />
<SideBar />
<main className={styles["main--container"]}>
<div className={styles["main--content"]}>
<Outlet /> // <-- nested routes rendered here
</div>
</main>
</>
);
const App = () => {
return (
<>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route element={<AppLayout />} >
<Route path="/" element={<Dashboard />} /> // <-- nested routes
</Route>
</Routes>
</>
);
};
xxxxxxxxxx
<Routes>
<Route
path="/"
element={[
<Header key={1} />,
<LandingSection key={2} />,
<CardList key={3} /> ]}>
</Route>
</Routes>
xxxxxxxxxx
//use multiple components in one Route:
<Route path='/path' render={props =>
<div>
<FirstChild />
<SecondChild />
</div>
} />
xxxxxxxxxx
//use multiple components in one Route in version 6.0.2:
//this can be done by wrapping them in react fragments
import {BrowserRouter, Routes, Route} from "react-router-dom"
<BrowserRouter>
<Routes>
<Route path="/" element={<><Header/><Nav/><Etc./></>}/>
</Routes>
</BrowserRouter>