Полное руководство по React Router v6. Часть 1 - Основы React Router

Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router (рассматривается в этой статье)
2. Продвинутые определения маршрутов
3. Управление навигацией
4. Подробно о роутерах

Основы React Router

Прежде чем мы начнем углубляться в расширенные функции React Router, сначала поговорим об основах React Router. Чтобы использовать React Router, вам необходимо запустить npm i react-router-dom для установки React Router. Эта библиотека устанавливает DOM версию React Router. Если вы используете React Native, вам нужно будет установить react-router-native. За исключением этого небольшого отличия, библиотеки работают почти одинаково. В этой статье сосредоточимся на react-router-dom, но, как уже упоминалось, обе библиотеки почти идентичны. Чтобы использовать React Router, вам нужно сделать три вещи.

1. Настроить роутер
2. Прописать свои маршруты
3. Управлять навигацией

Настройка роутера

Настройка роутера является самым простым шагом. Все, что вам нужно сделать, это импортировать конкретный роутер, который вам нужен (BrowserRouter для веба и NativeRouter для мобильных устройств) и обернуть все ваше приложение в этот роутер.

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

Как правило, вы импортируете свой маршрутизатор в файле index.js вашего приложения, и он будет оборачивать компонент App. Роутер работает так же, как контекст в React, и предоставляет всю необходимую информацию вашему приложению, чтобы вы могли выполнять маршрутизацию и использовать все пользовательские хуки из React Router.

Определение маршрутов

Следующим шагом в React Router является определение ваших маршрутов. Обычно это делается на верхнем уровне приложения, например в компоненте App, но это можно сделать в любом месте.

import { Route, Routes } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/books" element={<BookList />} />
    </Routes>
  )
}

Определить маршруты так же просто, как определить компонент Route для каждого маршрута в приложении, а затем поместить все эти компоненты Route в один компонент Routes. Всякий раз, когда ваш URL-адрес изменяется, React Router будет просматривать маршруты, определенные в вашем компоненте Routes, и он будет отображать содержимое в пропсе element роута Route, который имеет path, соответствующий URL-адресу. В приведенном выше примере, если бы наш URL-адрес был /books, то отображался бы компонент BookList. Преимущество React Router заключается в том, что при переходе между страницами он обновляет только содержимое внутри вашего компонента Routes. Весь остальной контент на вашей странице останется прежним, что повысит производительность и удобство использования.

Управление навигацией

Последним шагом к React Router является обработка навигации. Обычно в приложении вы перемещаетесь с помощью тегов <a>, но React Router использует свой собственный кастомный компонент Link для обработки навигации. Link представляет собой просто оболочку вокруг тега <a>, которая помогает обеспечить правильную обработку всей маршрутизации и условного повторного рендеринга, чтобы вы могли использовать его так же, как обычный тег <a>.

import { Route, Routes, Link } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/books">Books</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<BookList />} />
      </Routes>
    </>
  )
}

В нашем примере мы добавили две ссылки на главную страницу и страницу книг. Вы также заметите, что мы использовали проп to для установки URL-адреса вместо пропса href, который вы привыкли использовать с тегом <a>. Это единственное различие между компонентом Link и тегом <a>, и это то, что вам нужно помнить, так как легко ошибочно случайно использовать проп href вместо to. Еще одна вещь, которую следует отметить в нашем новом коде, заключается в том, что <nav>, который мы создаем в верхней части нашей страницы, находится за пределами нашего компонента Routes, что означает, что при смене страниц этот раздел навигации не будет повторно рендериться, так при изменении URL-адреса изменится только содержимое компонента Routes.

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

Именование классов и файлов

CSS модули позволяют автоматически генерировать уникальные имена классов для каждого компонента. Чтобы сделать код более понятным и поддерживаемым, рекомендуется использовать осмысленные имена классов и файлов, отражающие их назначение. Например, если у вас есть компонент Button, вы можете назвать его стилевой файл Button.module.css.

Использование локальных и глобальных стилей

CSS модули позволяют определить локальные стили для конкретного компонента, а также использовать глобальные стили для всего приложения. Такой подход позволяет создавать переиспользуемые стили и управлять ими более эффективно. Например, вы можете определить общие стили для кнопок в глобальном файле стилей, а затем использовать локальные стили для конкретного компонента Button, если необходимы дополнительные или измененные стили.

Подключение CSS модулей в React-компонентах

Чтобы использовать CSS модули в функциональных компонентах React, вы можете импортировать стили с помощью конструкции import и применить их к элементам JSX с помощью атрибута className. Например, если у вас есть стилевой файл Button.module.css c классом button, вы можете импортировать его и применить к кнопке следующим образом:

import React from "react";
import styles from "./Button.module.css";

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

export default Button;

Использование динамических классов

CSS модули также поддерживают динамическое добавление классов в зависимости от определенных условий. Например, если вы хотите добавить класс active к кнопке, если она находится в активном состоянии, вы можете использовать стандартный оператор if/else внутри функционального компонента для определения значения атрибута className:

import React, { useState } from "react";
import styles from "./Button.module.css";

const Button = () => {
  const [isActive, setIsActive] = useState(false);

  const handleButtonClick = () => {
    setIsActive(!isActive);
  };

  return (
    <button
      className={`${styles.button} ${isActive ? styles.active : ""}`}
      onClick={handleButtonClick}
    >
      Click me
    </button>
  );
};

export default Button;

Наследование стилей

CSS модули позволяют наследовать стили других классов, что упрощает повторное использование существующих стилей. Например, вы можете определить базовый класс base с общими стилями для всех кнопок, а затем создать новый класс button с дополнительными стилями:

/* Button.module.css */

.base {
  /* общие стили для всех кнопок */
}

.button {
  composes: base;
  /* дополнительные стили для кнопок */
}

Это позволяет создавать более модульные и гибкие стили, а также упрощает их поддержку и изменение. В заключение, работа с CSS модулями в React выгодна для разработки функциональных компонентов, так как позволяет организовать и изолировать стили для каждого компонента. Надеюсь, эти лучшие практики и примеры помогут вам эффективно использовать CSS модули в ваших проектах.