---
title: Маршрутизация
seo:
  description: >-
    Тема «Маршрутизация» для собеседования React Developer. Как работает
    библиотека React Router? Как реализовать анимированный переход между
    страницами с помощью React Router?
  title: Маршрутизация — React Developer
---

[Все темы React Developer](/prep/react-developer)

## <strong>Как работает библиотека</strong> <code>React Router</code><strong>?</strong> [#q-14bee738d69b8165b9c1d1fd7cfd5d6c]

React Router управляет маршрутизацией в React. Ниже показан API версии 5. В версиях 6 и 7 вместо Switch используется Routes, а элемент маршрута задают через element; старые примеры нельзя запускать без адаптации на новой версии.

#### Основные компоненты&#58;

{/* prettier-ignore */}
1. <strong>BrowserRouter</strong>&#58;

    - Оборачивает приложение и использует HTML5 <code>history</code> API для управления URL.

    ```jsx
    import { BrowserRouter } from 'react-router-dom';

    const App = () => (
      <BrowserRouter>
        {/* маршруты */}
      </BrowserRouter>
    );
    ```

1. <strong>Route</strong>&#58;

    - Определяет маршрут, который отображает компонент при совпадении пути.

    ```jsx
    import { Route } from 'react-router-dom';

    const App = () => (
      <BrowserRouter>
        <Route path="/home" component={Home} />
      </BrowserRouter>
    );
    ```

1. <strong>Link</strong>&#58;

    - Создает ссылки для навигации по маршрутам без перезагрузки страницы.

    ```jsx
    import { Link } from 'react-router-dom';

    const Navigation = () => (
      <nav>
        <Link to="/home">Home</Link>
      </nav>
    );
    ```

1. <strong>Switch</strong>&#58;

    - Рендерит первый совпавший маршрут.

    ```jsx
    import { Switch, Route } from 'react-router-dom';

    const App = () => (
      <BrowserRouter>
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </BrowserRouter>
    );
    ```

React Router предоставляет компоненты для создания маршрутов, навигации и управления URL в приложениях React, обеспечивая клиентскую маршрутизацию без перезагрузки страницы.

:::note[Ссылки для изучения]

1. [Клиентская и вложенная маршрутизация React Router 6](https://reactdev.ru/libs/react-router.6/overview/)
   :::

---

## <strong>Как реализовать анимированный переход между страницами с помощью</strong> <code>React Router</code><strong>?</strong> [#q-14bee738d69b81fbb97dec0cdfc84208]

Для реализации анимированных переходов между страницами в React Router используйте библиотеку <code>react&#45;transition&#45;group</code>.

#### Шаги&#58;

{/* prettier-ignore */}
1. <strong>Установка библиотек</strong>&#58;

    ```bash
    npm install react-router-dom react-transition-group
    ```

1. <strong>Создание анимированных переходов</strong>&#58;

    - Оберните компоненты маршрутов в <code>CSSTransition</code> и используйте <code>Switch</code> для маршрутизации.

#### Пример&#58;

```jsx
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useLocation,
} from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./styles.css"; // CSS для анимации

const Home = () => <div className="page">Home Page</div>;
const About = () => <div className="page">About Page</div>;

const App = () => {
  const location = useLocation();

  return (
    <TransitionGroup>
      <CSSTransition key={location.key} timeout={300} classNames="fade">
        <Switch location={location}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
};

const Root = () => (
  <Router>
    <App />
  </Router>
);

export default Root;
```

#### Пример CSS для анимации&#58;

```css
/* styles.css */
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 300ms ease-in-out;
}

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
}
```

Для реализации анимированных переходов между страницами с помощью React Router используйте библиотеку <code>react&#45;transition&#45;group</code> для обертки маршрутов и определения анимаций.

:::note[Ссылки для изучения]

1. [Переходы React Router с AnimatePresence — пример в разделе 7](https://habr.com/ru/articles/1015134/)
   :::

---

## Как лениво загружать компоненты маршрутов в React Router? [#q-14bee738d69b81d09077d127aec67faa]

<span id="q-14bee738d69b81ad824af0e20ed23bc7"></span>

Компонент можно загрузить динамическим импортом через `lazy` и показать fallback через `Suspense`:

```jsx
import { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";

const Settings = lazy(() => import("./Settings.jsx"));

<Routes>
  <Route
    path="settings"
    element={
      <Suspense fallback={<p>Загрузка…</p>}>
        <Settings />
      </Suspense>
    }
  />
</Routes>;
```

Модуль загрузится при первом рендере маршрута, а сборщик вынесет его в отдельный chunk. В data router можно использовать свойство маршрута `lazy`, чтобы отложенно загрузить и компонент, и другие обработчики маршрута. Подробнее: [`lazy`](https://react.dev/reference/react/lazy) и [lazy routes](https://reactrouter.com/start/data/route-object#lazy).

:::note[Ссылки для изучения]

1. [Как сделать сайт бесконечно ленивым. Часть 1: Чем полезна ленивая загрузка](https://habr.com/ru/articles/960058/)
   :::