Как задать маршруты с вложенными компонентами (nested routes)?

Вложенные маршруты (nested routes) позволяют организовать компоненты в иерархию, где дочерние маршруты отображаются внутри родительского. Это достигается использованием компонента <Outlet> для рендеринга дочерних маршрутов.

Пример:

import { Routes, Route } from 'react-router-dom';
const App = () => (
	<Routes>
		<Route path="/" element={<Layout />}>
			<Route path="about" element={<About />} />
			<Route path="contact" element={<Contact />} />
		</Route>
	</Routes>
);
const Layout = () => (
	<div>
		<header>Header</header>
		<Outlet /> {/* Здесь рендерятся дочерние маршруты */}
		<footer>Footer</footer>
	</div>
);

• Родительский компонент (Layout) включает общий контент, например, шапку и подвал.

• <Outlet> определяет место, где будут рендериться дочерние маршруты (/about, /contact).

При переходе на /about рендерится <About /> внутри <Layout>.