Как корректно работать с react router?

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

Чтобы начать работу с React Router, первым делом необходимо установить его в свой проект. Для этого можно воспользоваться пакетным менеджером npm или yarn, выполнив команду:

npm install react-router-dom

или

yarn add react-router-dom

После установки, импортируем необходимые компоненты в файле, где будет реализована навигация:

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

React Router предоставляет несколько компонентов для маршрутизации. Основными из них являются:

- BrowserRouter - основной компонент, оборачивающий всё приложение. Он использует HTML5 History API для манипуляции URL и обеспечивает работу маршрутизации;
- Route - компонент, который задает определенный маршрут и связанный с ним компонент для отображения;
- Switch - компонент, который гарантирует отображение только одной соответствующей маршруту компонента;
- Link - компонент, который создает ссылку для перехода по определенному маршруту.

Пример использования React Router:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const NotFound = () => <h1>404 Not Found</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

В приведенном примере у нас есть два маршрута - главная страница и страница "О нас". Маршруты определены с помощью компонента Route, который принимает два атрибута: path - путь к компоненту, и component - компонент, который должен отображаться при переходе по данному маршруту.

Компонент Switch позволяет выбрать только один из вариантов маршрута - первый, который совпадает с текущим URL. Если ни один из маршрутов не совпадает, отображается компонент NotFound.

Ссылки на маршруты создаются с помощью компонента Link, который принимает атрибут to с указанием пути к маршруту.

Таким образом, работа с React Router включает в себя определение маршрутов с помощью компонента Route, создание ссылок с помощью компонента Link и управление отображением компонентов с помощью компонента Switch. Это позволяет реализовать навигацию в React приложении и отображать различные компоненты в зависимости от текущего URL.