Вышел React Router v6
В React Router v6 добавлены новые фичи, улучшена поддержка с последними версиями React. Также новая версия содержит несколько критических изменений по сравнению с пятой версией. В React Router v6 активно используются хуки, поэтому для работы требуется версия React 16.8 и выше.
- Вместо <Switch> используйте <Routes>. Внутри <Routes> все роуты и ссылки <Link to> будут относительными. Этот подход упростит работу с вложенными роутами, не нужно будет использовать match.url.
- Используется элемент вместо компонента в роутах <Route>. Для рендера можно передать любой элемент в проп element. Вложенные роуты задаются в children.
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="users" element={<Users />}>
<Route path="me" element={<OwnUserProfile />} />
<Route path=":id" element={<UserProfile />} />
</Route>
</Routes>
</BrowserRouter>
);
}
function Users() {
return (
<div>
<nav>
<Link to="me">My Profile</Link>
</nav>
<Outlet />
</div>
);
}
- Добавлен компонент <Outlet>. Позволяет отображать вложенный UI при рендере дочерних роутов. Также в <Route> добавлен проп index, который работает в связке с <Outlet>. Если родительский роут соответствует текущему URL браузера, то будет отрендерен <Route index>, если он есть среди дочерних роутов.
- Изменения в <Route path>. Были оставлены только два типа плейсхолдера: :id и * в конце пути. Была удалена поддержка RegExp в пути. Чувствительность к регистру пути переехала в <Routes caseSensitive>.
- Изменилось поведение <Link to>. Если путь в to не начинается с /, то он будет рендерить ссылку, относительную роуту, в котором был отрендерен. Использование в <Link to> .. удаляет сегмент родительского роута, а не URL.
<Routes>
<Route path="users">
<Route
path=":id/messages"
element={
// Ссылка ведет в /users
<Link to=".." />
}
/>
</Route>
</Routes>
- Добавлены новые хуки. Если храните роуты в виде объекта и используете react-router-config, то в v6 есть хук useRoutes для рендера роутов в виде объекта.
Вместо useHistory используйте useNavigate. Чаще всего будет достаточно переименовать название хука и изменить вызовы history.push или history.replace на navigate. Хук useNavigate полезен тем, что поддерживает React Suspense. Например, если был переход с роута, который еще не был загружен, то происходит замена URL, а не пуш в историю браузера.
https://reactrouter.com/docs/en/v6/upgrading/v5
