Создание базовых маршрутов с использованием BrowserRouter, Route, Switch

Основы использования компонентов маршрутизации

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

Когда вы создаёте одностраничные приложения (SPA), пользователи обычно хотят переходить между разными экранами, не перезагружая страницу. Например, переключение между домашней страницей, списком пользователей и детальным описанием пользователя. Реакт сам по себе не умеет это делать. Здесь вступает в игру библиотека react-router-dom.

Компоненты маршрутизации

Прежде всего, разберёмся, какие ключевые компоненты нам понадобятся:

• BrowserRouter — это контейнер, который управляет историей маршрутов на основе URL-адресов. Фактически, это основа маршрутизации.
• Route — компонент, с помощью которого мы задаём маршруты и указываем, какой именно компонент отобразить для каждого пути.
• Switch (позже заменён на Routes, но мы используем его здесь для совместимости проекта) — выбирает только один маршрут из доступных для отображения.

Настройка проекта и установка react-router-dom

Давайте добавим библиотеку в наш проект. Откройте ваш терминал в папке проекта и выполните команду:

npm install react-router-dom

После установки проверьте, что библиотека добавлена в package.json и готова к использованию.

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

Создание базовой структуры компонентов

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

Структура папок:

src/
├── App.tsx
├── components/
│   ├── Home.tsx
│   ├── About.tsx
│   ├── Contact.tsx

Создадим компоненты. Например, Home.tsx:

import React from 'react';

const Home: React.FC = () => {
  return (
    <div>
      <h1>Добро пожаловать!</h1>
      <p>Это домашняя страница нашего приложения.</p>
    </div>
  );
};

export default Home;

Теперь аналогично создайте About.tsx и Contact.tsx. Они могут быть простыми, например:

import React from 'react';

const About: React.FC = () => {
  return (
    <div>
      <h1>О Нас</h1>
      <p>Здесь вы узнаете больше о нашей замечательной команде.</p>
    </divv
  );
};

export default About;

import React from 'react';

const Contact: React.FC = () => {
  return (
    <div>
      <h1>Связаться с нами</h1>
      <p>Напишите нам через контактную форму или позвоните!</p>
    </div>
  );
};

export default Contact;

Настройка маршрутов с BrowserRouter, Route и Switch

Теперь переходим к добавлению маршрутов в приложение. Откройте App.tsx и измените его содержимое.

Подключаем BrowserRouter:

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch // Позже заменим на Routes в новых версиях react-router-dom
} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App: React.FC = () => {
  return (
    <Router>
      <div>
        <h1>Моё приложение</h1>
        {/* Компонент Switch выбирает только один маршрут */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

Что здесь происходит?

1. Router (BrowserRouter) — оборачивает наше приложение, добавляя поддержку маршрутизации.
2. Switch — проверяет пути по очереди и отображает первый подходящий Route.
3. Route — указывает путь path и компонент, который нужно отобразить.
4. Атрибут exact в Route нужен, чтобы компонент рендерился только если путь совпадает полностью. Без него /about может случайно совпасть с /.

Тестирование маршрутов

Запустите приложение:

npm start

Откройте браузер и перейдите по следующим адресам:

• http://localhost:3000/ — отобразится компонент Home.
• http://localhost:3000/about — отобразится компонент About.
• http://localhost:3000/contact — отобразится компонент Contact.

Поздравляю! Вы только что создали базовую маршрутизацию 🎉.

Добавление навигации между страницами

Чтобы пользователи могли переходить между страницами без ручного ввода URL, создадим навигационное меню с использованием компонента Link из react-router-dom.

Обновите App.tsx:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App: React.FC = () => {
  return (
    <Router>
      <div>
        <h1>Моё приложение</h1>
        {/* Навигационное меню */}
        <nav>
          <ul>
            <li>
              <Link to="/">Главная</Link>
            </li>
            <li>
              <Link to="/about">О нас</Link>
            </li>
            <li>
              <Link to="/contact">Контакты</Link>
            </li>
          </ul>
        </nav>

        {/* Маршруты */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

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

Типичные ошибки при маршрутизации

"Мой компонент не отображается"

Убедитесь, что Route имеет правильный путь path и компонент. Также проверьте Switch, чтобы он не блокировал ваши маршруты.

"Все страницы отображаются сразу"

Не забудьте использовать атрибут exact для рутового пути "/". Без него любой путь будет совпадать с /.