Вопрос с собеседования · Frontend

Как настроить маршруты и вложенные раскладки в React Router?

JuniorReact
Ещё спрашивают так:
  • Что такое Outlet в React Router?
Коротко

Маршруты описывают деревом: путь → компонент. Вложенные маршруты рендерятся внутри родителя на месте <Outlet/> — так общая раскладка (шапка, меню) остаётся, а меняется содержимое. Переход без перезагрузки — <Link to> или useNavigate(); обычный <a href> перезагрузит страницу. Маршрут «*» — страница 404, index — содержимое родителя по умолчанию.

  • NavLink подсвечивает активную ссылку
  • Для статического хостинга нужна отдача index.html на все пути
  • Ленивые маршруты — разделение кода по страницам

А ещё Next.js и другие фреймворки строят маршруты из файлов, а не из конфигурации

Подробно

const router = createBrowserRouter([
  { path: "/", element: <Layout />, children: [
    { index: true, element: <Home /> },
    { path: "orders/:id", element: <Order /> },
    { path: "*", element: <NotFound /> },
  ]},
]);
function Layout() { return <><Header /><Outlet /></>; }

Что хотят услышать

  • Дерево маршрутов и Outlet.
  • Link и useNavigate вместо a href.
  • index и 404.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Для переходов внутри приложения нужен обычный <a href>, иначе история браузера не обновится
  • ✓Дерево путь → компонент, вложенные — в Outlet, переходы — Link без перезагрузки
  • ✗Вложенные маршруты полностью заменяют раскладку родителя, поэтому Outlet не нужен
  • ✗React Router встроен в сам React, и маршруты включаются флагом при вызове createRoot

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования