Программная маршрутизация с кнопками в React

Зачем нужна программная маршрутизация?

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

Программная маршрутизация отличается от традиционной тем, что здесь мы можем переключать маршруты "по команде", например, при нажатии кнопки, а не только через стандартные ссылки <a>.

Пример: вы создаёте приложение с несколькими вкладками, и хотите, чтобы при нажатии на кнопку или на другой элемент интерфейса отображалась соответствующая страница.

Шаги настройки программной маршрутизации

1. Установка React Router
Прежде чем начать, убедитесь, что в вашем проекте установлен React Router. Если его ещё нет, выполните команду:

npm install react-router-dom

Эта библиотека — стандарт для работы с маршрутизацией в React. Она предоставляет все необходимые инструменты для работы с маршрутами, включая функции для программного переключения.

2. Создание маршрутов
Теперь создадим базовую настройку маршрутов в приложении. Для этого вам нужно импортировать компоненты BrowserRouter, Routes и Route из библиотеки.

import React from 'react';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from './Home';

import About from './About';



function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </BrowserRouter>

  );

}



export default App;

Здесь мы создали два маршрута: один для домашней страницы (Home), другой для страницы "О нас" (About).

3. Добавление кнопок для программной маршрутизации
Теперь пришло время добавить кнопки, которые позволят пользователю переходить между этими страницами. Для этого мы будем использовать хук useNavigate, который предоставляет возможность программно менять маршрут.

import React from 'react';

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



function Home() {

  const navigate = useNavigate();



  const goToAbout = () => {

    navigate('/about');

  };



  return (

    <div>

      <h1>Добро пожаловать на главную страницу</h1>

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

    </div>

  );

}



export default Home;

В этом примере, когда пользователь нажимает на кнопку, функция goToAbout изменяет текущий маршрут на /about.

4. Возвращение на предыдущую страницу
Если вы хотите добавить возможность возвращаться назад, например, с помощью кнопки "Назад", это тоже легко реализуется с помощью useNavigate.

import React from 'react';

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



function About() {

  const navigate = useNavigate();



  const goBack = () => {

    navigate(-1);

  };



  return (

    <div>

      <h1>О нас</h1>

      <button onClick={goBack}>Назад</button>

    </div>

  );

}



export default About;

Функция navigate(-1) возвращает пользователя на предыдущую страницу в истории маршрутов.

Дополнительные возможности программной маршрутизации

Переход с параметрами
React Router позволяет передавать параметры в маршрут. Это полезно, когда нужно открыть страницу с конкретной информацией, например, профиль пользователя.

import React from 'react';

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



function UserList() {

  const navigate = useNavigate();



  const goToUser = (id) => {

    navigate(`/user/${id}`);

  };



  return (

    <div>

      <h1>Список пользователей</h1>

      <button onClick={() => goToUser(1)}>Профиль пользователя 1</button>

      <button onClick={() => goToUser(2)}>Профиль пользователя 2</button>

    </div>

  );

}



export default UserList;

Здесь кнопки отправляют пользователя на маршрут /user/1 или /user/2, передавая уникальный ID.

Обработка маршрутов с параметрами
Чтобы обработать такие маршруты, используйте компонент Route с параметрами и хук useParams для получения значения параметра.

import React from 'react';

import { useParams } from 'react-router-dom';



function UserProfile() {

  const { id } = useParams();



  return (

    <div>

      <h1>Профиль пользователя с ID: {id}</h1>

    </div>

  );

}



export default UserProfile;

Этот компонент отобразит переданный ID на странице.

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

import React from 'react';

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



function Home() {

  const navigate = useNavigate();



  const goToAboutWithMessage = () => {

    navigate('/about', { state: { message: 'Привет из Home!' } });

  };



  return (

    <div>

      <h1>Главная страница</h1>

      <button onClick={goToAboutWithMessage}>Перейти с сообщением</button>

    </div>

  );

}



export default Home;

Пример получения данных:

import React from 'react';

import { useLocation } from 'react-router-dom';



function About() {

  const location = useLocation();

  const message = location.state?.message;



  return (

    <div>

      <h1>О нас</h1>

      {message && <p>{message}</p>}

    </div>

  );

}



export default About;

Теперь на странице "О нас" будет отображаться переданное сообщение.