React Router

React Router — это стандартная библиотека для маршрутизации в React-приложениях. Она позволяет создавать одностраничные приложения (SPA) с навигацией без перезагрузки страницы.

Установка

Установите react-router-dom:

npm install react-router-dom

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

• <BrowserRouter>: Используется для маршрутизации в веб-приложениях.
• <Routes>: Определяет набор маршрутов.
• <Route>: Определяет отдельный маршрут и компонент, который будет отображаться.
• <Link>: Используется для навигации между маршрутами без перезагрузки страницы.
• <NavLink>: Аналогичен <Link>, но добавляет класс active для активной ссылки.
• <Navigate>: Используется для программной навигации.
• <Outlet>: Используется для вложенных маршрутов.

Пример использования

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  NavLink,
  Navigate,
  Outlet,
} from "react-router-dom";

function Home() {
  return <h1>Главная страница</h1>;
}

function About() {
  return <h1>О нас</h1>;
}

function Profile() {
  return (
    <div>
      <h1>Профиль</h1>
      <nav>
        <NavLink to="details">Детали</NavLink>
        <NavLink to="settings">Настройки</NavLink>
      </nav>
      <Outlet />
    </div>
  );
}

function ProfileDetails() {
  return <h2>Детали профиля</h2>;
}

function ProfileSettings() {
  return <h2>Настройки профиля</h2>;
}

function NotFound() {
  return <h1>404: Страница не найдена</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <NavLink to="/">Главная</NavLink>
        <NavLink to="/about">О нас</NavLink>
        <NavLink to="/profile">Профиль</NavLink>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile" element={<Profile />}>
          <Route path="details" element={<ProfileDetails />} />
          <Route path="settings" element={<ProfileSettings />} />
        </Route>
        <Route path="/redirect" element={<Navigate to="/" />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Хуки

• useParams(): Возвращает объект с параметрами URL.
• useLocation(): Возвращает объект location, содержащий информацию о текущем URL.
• useNavigate(): Возвращает функцию для программной навигации.
• useOutletContext(): Возвращает контекст из родительского маршрута.

Пример использования хуков

import React from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";

function User() {
  const { id } = useParams();
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div>
      <h1>Пользователь: {id}</h1>
      <p>Текущий путь: {location.pathname}</p>
      <button onClick={() => navigate("/")}>На главную</button>
    </div>
  );
}

export default User;

Вложенные маршруты

Используйте <Outlet> для отображения дочерних маршрутов.

<Route path="/profile" element={<Profile />}>
  <Route path="details" element={<ProfileDetails />} />
  <Route path="settings" element={<ProfileSettings />} />
</Route>

Программная навигация

Используйте хук useNavigate для программной навигации.

import { useNavigate } from "react-router-dom";

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/about");
  };

  return <button onClick={handleClick}>Перейти на страницу "О нас"</button>;
}