PassFront
  1. PassFront
  2. База знаний
  3. Роутинг

В чем разница в маршрутизации в React Router v5 и React Router v6?

Роутинг

React Router v6 (2021) — переработка API с упором на вложенные маршруты и ранжирование. Отличия от v5 — типовой вопрос для тех, кто мигрировал.

Изменения v5 → v6

Switch → Routes + обязательный element:

// v5
<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/:id" render={(props) => <User {...props} />} />
</Switch>

// v6
<Routes>
  <Route path="/users" element={<Users />} />
  <Route path="/users/:id" element={<User />} />
</Routes>
  • Пропы component/render заменены единым element={<JSX />} — props передаются естественно.
  • exact исчез: v6 всегда матчит точно, а «префиксное» поведение задаётся path="users/*".
  • Ранжирование маршрутов: v6 сам выбирает наиболее специфичный маршрут — порядок объявления больше не важен (в v5 срабатывал первый совпавший).

Вложенность стала первоклассной. Маршруты вкладываются друг в друга, родитель рендерит <Outlet />; относительные пути и ссылки (path="stats" внутри родителя) вместо ручной склейки ${match.url}/stats.

Хуки вместо HOC/props:

  • useHistory → useNavigate: navigate('/home'), navigate(-1);
  • useRouteMatch → useMatch; параметры — useParams; withRouter удалён.

Redirect → `<Navigate />` (компонент), NavLink потерял activeClassName (className-функция вместо него).

Прочее: конфигурация объектами через useRoutes; меньший размер бандла; v6.4+ добавил data API (loaders/actions, createBrowserRouter).

Коротко для собеседования

v6: Routes вместо Switch с ранжированием по специфичности (порядок не важен, exact не нужен), element вместо component/render, полноценные вложенные маршруты с Outlet и относительными путями, useNavigate вместо useHistory, Navigate вместо Redirect; с v6.4 — loaders/actions для данных.

Другие вопросы раздела