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

[Все темы React Developer](/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](https://reactdev.ru/libs/react-router/#_2)
   :::

---

## <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](https://reactdev.ru/libs/react-router/#_2)
   :::

---

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

Для асинхронной загрузки компонентов в React Router используйте <code>React&#46;lazy</code> и <code>React&#46;Suspense</code>.

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

1. <strong>Используйте</strong> <code>React&#46;lazy</code>
   <strong>для динамического импорта компонента</strong>&#58;

   ```javascript
   const MyComponent = React.lazy(() => import("./MyComponent"));
   ```

1. <strong>Обертайте маршруты в</strong> <code>React&#46;Suspense</code>
   <strong>с fallback-контентом</strong>&#58;

   ```jsx
   import React, { Suspense, lazy } from "react";
   import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

   const Home = lazy(() => import("./Home"));
   const About = lazy(() => import("./About"));

   const App = () => (
     <Router>
       <Suspense fallback={<div>Loading...</div>}>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
         </Switch>
       </Suspense>
     </Router>
   );

   export default App;
   ```

Для асинхронной загрузки компонентов с React Router используйте <code>React&#46;lazy</code> для динамического импорта и оборачивайте маршруты в <code>React&#46;Suspense</code> для отображения fallback-контента во время загрузки компонентов.

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

1. [Маршрутизация в React](https://reactdev.ru/libs/react-router/#_2)
   :::