Что нового в React Router v6

Что такое React Router
React Router – это стандартная библиотека для маршрутизации в React. Он позволяет обрабатывать маршруты в веб-приложении, используя динамическую маршрутизацию. Это позволяет нам перемещаться между различными компонентами в приложении React без обновления страницы при навигации пользователя.
Изменения в React Router v6
<Switch> сейчас <Routes>
просто замените ваш <Switch>
на <Routes>
и все готово.
// React Router v5
import { BrowserRouter, Switch, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/"><Home /></Route>
<Route path="/categories"><Categories /></Route>
</Switch>
</BrowserRouter>
);
}
// React Router v6
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/categories" element={<Categories />} />
</Routes>
</BrowserRouter>
);
}
Более простые вложенные маршруты и схемы
<Routes>
в React Router v6 действительно легко определять вложенные маршруты и относительные маршруты, упрощая сложные маршруты и схемы.
<Route>
и<Link>
значения в<Routes>
элементе v6 автоматически относятся к родительскому маршруту, который их визуализировал.
В React Router v5 необходимо было определить вложенные маршруты, и нужно было выполнить сопоставление путей.
// React Router v5
import { BrowserRouter, Switch, Route, Link, useRouteMatch } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/"><Home /></Route>
<Route path="/categories"><Categories /></Route>
</Switch>
</BrowserRouter>
);
}
function Categories() {
const { match, url } = useRouteMatch();
return (
<div>
<nav>
<Link to={`${url}/shoes`}>Shoes</Link>
</nav>
<Switch>
<Route path={`${path}/shoes`}>
<Shoes />
</Route>
<Route path={`${path}/clothes`}>
<Clothes />
</Route>
</Switch>
</div>
);
}
В React Router v6 мы можем объединить все наши дочерние маршруты и определить их в родительском маршруте в App
// React Router v6
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="categories" element={<Categories />}>
<Route path="shoes" element={<Shoes />} />
<Route path="clothes" element={<Clothes />} />
</Route>
</Routes>
</BrowserRouter>
);
}
function Categories() {
return (
<div>
<nav>
<Link to="shoes">Shoes</Link>
</nav>
<Outlet />
</div>
);
}
Примечание: компонент
<Outlet>
используется так же, как и{this.props.children}
в React Router v6.
В приведенном выше примере <Outlet>
используется для отрисовки дочерних маршрутов в компоненте Categories
. Он будет отображать либо <Shoes>
, либо <Clothes>
, в зависимости от местоположения.
Маршруты на основе объектов
React Router v6 предоставляет новые API для маршрутизации, которые используют простые объекты JavaScript для объявления маршрутов.
Крючок useRoutes
позволяет нам заявить о наших маршрутах с использованием объектов JavaScript вместо элементов React .
Давайте перепишем приведенный выше пример с помощью useRoutes
hook.
import { BrowserRouter, Link, Outlet, useRoutes } from 'react-router-dom';
function App() {
let element = useRoutes([
{ path: '/', element: <Home /> },
{
path: 'categories',
element: <Categories />,
children: [
{ path: 'shoes', element: <Shoes /> },
{ path: 'clothes', element: <Clothes /> },
]
}
]);
return element;
}
function Categories() {
return (
<div>
<nav>
<Link to="shoes">Shoes</Link>
</nav>
<Outlet />
</div>
);
}
Готовность к приостановке навигации
Старый крюк useHistory
был удален и заменен новым useNavigate
.
useNavigate
hook можно использовать для программной навигации в вашем приложении.
Например, после нажатия кнопки профиля вы хотите, чтобы пользователь был перенаправлен на страницу профиля.
// React router v5
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
function clickHandler() {
history.push('/profile');
};
return <button onClick={clickHandler}>My Profile</button>;
};
// React router v6
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
function clickHandler() {
navigate('/profile');
};
return <button onClick={clickHandler}>My Profile</button>;
};
Примечание: если вы хотите заменить URL-адрес в истории браузера вместо нажатия, используйте
{ replace: true }
Меньший размер пакета
Еще одно существенное изменение – меньший размер пакета. Сравнение пакетов для react-router-dom@5.2.0
и react-router-dom@6.0.0-beta.0
показывает, что общий размер пакета уменьшился на 70%.
Меньшие пакеты означают, что ваше приложение загружается быстрее, особенно при медленных / плохих сетевых подключениях.
