Маршрутизация

Все темы React Developer

Как работает библиотека React Router?

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

Основные компоненты:

1. BrowserRouter:

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

   import { BrowserRouter } from 'react-router-dom';
   
   const App = () => (
     <BrowserRouter>
       {/* маршруты */}
     </BrowserRouter>
   );

2. Route:

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

   import { Route } from 'react-router-dom';
   
   const App = () => (
     <BrowserRouter>
       <Route path="/home" component={Home} />
     </BrowserRouter>
   );

3. Link:

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

   import { Link } from 'react-router-dom';
   
   const Navigation = () => (
     <nav>
       <Link to="/home">Home</Link>
     </nav>
   );

4. Switch:

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

   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, обеспечивая клиентскую маршрутизацию без перезагрузки страницы.

Как реализовать анимированный переход между страницами с помощью React Router?

Для реализации анимированных переходов между страницами в React Router используйте библиотеку react-transition-group.

Шаги:

1. Установка библиотек:

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

2. Создание анимированных переходов:

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

Пример:

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 для анимации:

/* 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 используйте библиотеку react-transition-group для обертки маршрутов и определения анимаций.

Как лениво загружать компоненты маршрутов в React Router?

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

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 и lazy routes.