Как задать маршруты с вложенными компонентами (nested routes)?
Этот вопрос проверяет знание вложенных маршрутов (nested routes) в React Router
Короткий ответ
Для создания вложенных маршрутов в React Router используется структура маршрутов, где один <Route> включает в себя другой. Дочерние маршруты отображаются внутри родительского компонента с использованием компонента <Outlet>.
Длинный ответ
Вложенные маршруты (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>.