Что нового в 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 .

Давайте перепишем приведенный выше пример с помощью useRouteshook.

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%.

Меньшие пакеты означают, что ваше приложение загружается быстрее, особенно при медленных / плохих сетевых подключениях.