Вышел React Router v6 В React Router v6 добавлены новые фичи, | Заметки про React
Вышел React Router v6
В React Router v6 добавлены новые фичи, улучшена поддержка с последними версиями React. Также новая версия содержит несколько критических изменений по сравнению с пятой версией. В React Router v6 активно используются хуки, поэтому для работы требуется версия React 16.8 и выше.
- Вместо используйте . Внутри все роуты и ссылки будут относительными. Этот подход упростит работу с вложенными роутами, не нужно будет использовать match.url.
- Используется элемент вместо компонента в роутах . Для рендера можно передать любой элемент в проп element. Вложенные роуты задаются в children.
function App() { return ( } /> }> } /> } />
); }
function Users() { return (
); }
- Добавлен компонент . Позволяет отображать вложенный UI при рендере дочерних роутов. Также в добавлен проп index, который работает в связке с . Если родительский роут соответствует текущему URL браузера, то будет отрендерен , если он есть среди дочерних роутов.
- Изменения в . Были оставлены только два типа плейсхолдера: :id и * в конце пути. Была удалена поддержка RegExp в пути. Чувствительность к регистру пути переехала в .
- Изменилось поведение . Если путь в to не начинается с /, то он будет рендерить ссылку, относительную роуту, в котором был отрендерен. Использование в .. удаляет сегмент родительского роута, а не URL.
path=":id/messages" element={ // Ссылка ведет в /users
} />
- Добавлены новые хуки. Если храните роуты в виде объекта и используете react-router-config, то в v6 есть хук useRoutes для рендера роутов в виде объекта. Вместо useHistory используйте useNavigate. Чаще всего будет достаточно переименовать название хука и изменить вызовы history.push или history.replace на navigate. Хук useNavigate полезен тем, что поддерживает React Suspense. Например, если был переход с роута, который еще не был загружен, то происходит замена URL, а не пуш в историю браузера.
