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

Настройка React Router:
Чтобы начать работу с React Router, нам нужно установить его как зависимость в нашем проекте. Откройте терминал и перейдите в каталог вашего проекта. Затем выполните следующую команду:

npm install react-router-dom

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

1. BrowserRouter:
   Компонент BrowserRouterиспользуется для оболочки всего нашего приложения и обеспечения функций маршрутизации. Он прослушивает изменения в URL-адресе и отображает соответствующий компонент на основе определенных маршрутов. Вот пример:

import { BrowserRouter } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      {/* Routes and components */}
    </BrowserRouter>
  );
};

2. Маршрут.
   Компонент Routeопределяет сопоставление между URL-путем и отображаемым компонентом. Требуется два основных реквизита: pathи component. Вот пример:

import { Route } from 'react-router-dom';
const Home = () => <h1>Welcome to the Home Page!</h1>;
const App = () => {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
    </BrowserRouter>
  );
};

3. Ссылка:
   Компонент Linkиспользуется для создания ссылок в нашем приложении. Он заменяет традиционный тег <a>и позволяет перемещаться между различными маршрутами без необходимости обновления страницы. Вот пример:

import { Link } from 'react-router-dom';
const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
};

4. Переключатель:
   Компонент Switchиспользуется для отображения первого Route, соответствующего текущему URL-адресу. Это гарантирует, что одновременно отображается только один маршрут. Вот пример:

import { Switch, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
};

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

import { Route } from 'react-router-dom';
const User = ({ match }) => {
  return <h1>Welcome, {match.params.username}!</h1>;
};
const App = () => {
  return (
    <BrowserRouter>
      <Route path="/user/:username" component={User} />
    </BrowserRouter>
  );
};

React Router предоставляет мощный и гибкий способ управления маршрутизацией в приложениях React. В этой статье мы рассмотрели базовый стандартный код/шаблон для настройки React Router и обсудили различные предлагаемые им методы, включая BrowserRouter, Route, Link, Switchи параметры маршрута. Используя эти методы, вы можете создавать динамический и интерактивный пользовательский интерфейс в своих проектах React.