Страницы и React Router

Введение

Создание страниц — обычная необходимость, когда веб-приложение усложняется или нужно представить различное содержимое; это часто встречается особенно в случае сайта или платформы.

При разработке с React можно создать механизм навигации между страницами с помощью React Router.

Шаги ниже нужно выполнять внутри вашего фронтенд-проекта на React.

Если это фронтенд, интегрированный с Netuno, то шаги ниже нужно выполнять внутри папки приложения Netuno, но там, где находится фронтенд-проект, например в:

• 📂 website/

Установка

Убедитесь, что в вашем проекте установлен модуль React Router:

bun install react-router

А также Ant.Design, который будет использоваться для создания общей структуры:

bun install antd

Настройка

Для начала нужно отредактировать main.jsx, который находится в папке 📂 src; нужно поместить BrowserRoute следующим образом:

src/main.jsx

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from "react-router";
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

Очень важно: если фронтенд только что создан, нужно удалить все виды CSS/Style и ненужные импорты, например изображений, чтобы избежать нежелательного поведения.

В App.js, который также находится в папке 📂 src, добавьте импорт модулей следующим образом:

src/App.jsx

import { Routes, Route, Link } from 'react-router';
import { Layout, Menu } from 'antd';

После импортов добавьте константы:

src/App.jsx

const { Header, Footer, Content } = Layout;

На этом начальном этапе возвращаемое значение компонента App может быть таким:

src/App.jsx

  ...
  return (
    <Layout>
      <Header>
        <Menu mode="horizontal">
          <Menu.Item>
            <Link to="/">Главная</Link>
          </Menu.Item>
          <Menu.Item>
            <Link to="/информация">Информация</Link>
          </Menu.Item>
        </Menu>
      </Header>
      <Content>
        <Routes>
          { /* Маршруты страниц будут здесь! */ }
        </Routes>
      </Content>
      <Footer>Подвал</Footer>
    </Layout>
  );
  ...

Таким образом, компоненты React Router структурированы с компонентами структуры страницы Ant.Design.

Создание страниц

Страницы находятся в отдельных компонентах, каждая страница представлена собственным компонентом React.

Хорошая практика — помещать компоненты страниц в папку с названием 📂 страницы.

Главная

Создайте начальную страницу, которая будет компонентом Главная и будет связана с путём /.

Файл компонента этой страницы будет:

• страницы/Главная/index.jsx

Код этого файла может быть:

src/страницы/Главная/index.jsx

import {useNavigate} from 'react-router';
import {Button} from 'antd';

function Главная() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Главная</h1>
      <Button onClick={()=> navigate('/информация')}>
        Перейти на страницу информации
      </Button>
    </div>
  );
};

export default Главная;

Кнопка программно меняет страницу, используя функцию navigate; это альтернатива компоненту Link.

Информация

Создайте страницу с примером содержимого, которая будет компонентом Информация и будет связана с путём /информация.

Файл компонента этой страницы будет:

• страницы/Информация/index.jsx

Код этого файла может быть:

src/страницы/Информация/index.jsx

import {useNavigate} from 'react-router';
import {Button} from 'antd';

function Информация() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Информация</h1>
      <Button onClick={()=> navigate('/')}>
        Вернуться на главную
      </Button>
    </div>
  );
}

export default Информация;

Кнопка программно меняет страницу, используя функцию navigate; это альтернатива компоненту Link.

Импорт страниц

В начале App.jsx импортируйте созданные компоненты страниц.

src/App.jsx

import Главная from './страницы/Главная';
import Информация from './страницы/Информация';

С импортированными страницами можно связать каждую страницу с определённым адресом, например /, /информация и т. д.

Адрес страницы также можно понимать как маршрут, или Route.

Поэтому в App.jsx, где определяются маршруты, а точнее Routes, адрес и компонент страниц определяются следующим образом:

src/App.jsx

    ...
    <Routes>
      <Route path="/" element={<Главная/>}/>
      <Route path="/информация" element={<Информация/>}/>
    </Routes>
    ...

path — это адрес, а element — компонент страницы.

Обратите внимание, что в Menu есть элементы с Link, которые указывают на адреса страниц, поэтому атрибут to в Link указывает, что нужно загрузить соответствующий Route, у которого в path задано то же значение.

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

Навигация

Чтобы добавить больше вариантов навигации по страницам, в Menu нужно добавить компоненты типа Link, указывающие на соответствующий адрес.

Также нужно добавить компоненты Route, которые связывают адрес с соответствующим компонентом страницы.

С помощью функции navigate можно программно менять страницы, например в таких ситуациях:

1. На странице входа после успешной проверки данных должен автоматически выполняться переход на другую страницу.
2. После регистрации учётной записи, когда данные успешно сохранены, должен автоматически выполняться переход на страницу входа.

Когда пользователь напрямую взаимодействует с навигацией через клик, мы используем компонент Link.

В остальных случаях, когда смена страницы происходит в определённый момент выполнения кода, мы используем функцию navigate, полученную с помощью useNavigate.

Заключение

С ReactJS и React Router можно определить несколько страниц и осуществлять навигацию между ними.

Ant.Design помогает строить структуру страницы и предлагает различные полезные компоненты для создания сложных и адаптивных интерфейсов.