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

Если вы новичок в React Router, это руководство для начинающих познакомит вас с основами работы.

Монтаж

Чтобы установить React Router, вам необходимо настроить проект React. Если у вас его еще нет, вы можете использовать команду create-react-app для настройки нового проекта:

npx create-react-app my-app
cd my-app

После настройки проекта React вы можете установить React Router, выполнив следующую команду:

npm install react-router-dom

Или, если вы используете пряжу:

yarn add react-router-dom

Настройка маршрутов

Первым шагом в использовании React Router является настройка ваших маршрутов. Маршрут в React Router — это просто сопоставление пути URL-адреса и компонента React.

Чтобы настроить маршруты, вам нужно импортировать компонент Route из react-router-dom и использовать его для определения маршрутов. Вот пример того, как настроить два маршрута, один для домашней страницы, а другой для страницы «О нас»:

import { Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => (
  <div>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
);

В этом примере компонент Home будет отображаться, когда пользователь переходит к пути /, а компонент About будет отображаться, когда пользователь переходит к пути /about.

Навигация между маршрутами

Теперь, когда вы настроили свои маршруты, вам нужно, чтобы пользователи могли перемещаться между ними. Для этой цели используется компонент Link из react-router-dom. Вот пример использования компонента Link для создания меню навигации:

import { Link } from 'react-router-dom';

const Nav = () => (
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
  </ul>
);

Это создаст простое навигационное меню с двумя ссылками: одна для домашней страницы, а другая для страницы «О нас». Когда пользователь нажимает на ссылку, URL-адрес изменяется и отображается соответствующий маршрут.

Передать реквизиты маршрутам

Иногда вы можете захотеть передать реквизиты компоненту, который рендерится по маршруту. Вы можете сделать это, используя реквизит render в компоненте Route. Вот пример того, как передать свойство title компоненту About:

import { Route } from 'react-router-dom';
import About from './About';

const App = () => (
  <div>
    <Route
      path="/about"
      render={() => <About title="About Us" />}
    />
  </div>
);

В этом примере компонент About будет отображаться с реквизитом title, равным «О нас».

Вложенные маршруты

Иногда вы можете захотеть вложить маршруты в другие маршруты. Это полезно для создания иерархии маршрутов, например блога с категориями и отдельными сообщениями.

Чтобы вложить маршруты, вы можете использовать компонент Route внутри другого компонента, который визуализируется маршрутом. Вот пример того, как настроить блог с категориями и отдельными сообщениями:

import { Route } from 'react-router-dom';
import Blog from './Blog';
import Category from './Category';
import Post from './Post';

const App = () => (
  <div>
    <Route exact path="/blog" component={Blog} />
    <Route path="/blog/:category" component={Category} />
    <Route path="/blog/:category/:post" component={Post} />
  </div>
);

В этом примере компонент Blog будет отображаться, когда пользователь переходит к пути /blog, компонент Category будет отображаться, когда пользователь переходит к пути, например /blog/tech, а компонент Post будет отображаться, когда пользователь переходит к пути, например /blog/tech/react-router.

Подведение итогов

Это лишь некоторые из основных функций React Router. Доступно множество других функций и параметров, таких как программная навигация, защита маршрута и анализ URL-адресов. Чтобы узнать больше, обязательно ознакомьтесь с документацией React Router.

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

Ссылка