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

Все темы 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?

Для асинхронной загрузки компонентов в React Router используйте React.lazy и React.Suspense.

Шаги:

1. Используйте React.lazy для динамического импорта компонента:

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

2. Обертайте маршруты в React.Suspense с fallback-контентом:

   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 используйте React.lazy для динамического импорта и оборачивайте маршруты в React.Suspense для отображения fallback-контента во время загрузки компонентов.