React Router: что это и как использовать

Рассказали, что такое React Router, что такое маршрутизация, для чего она нужна и как настроить простую и вложенную маршрутизацию на сайте. Привели примеры кода.

1. Что такое React Router и кому это нужно
2. Установка React Router
3. Создание простых маршрутов
4. Создание вложенных маршрутов

Что такое React Router и кому это нужно

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

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

React Router решает эту проблему. Библиотека помогает создавать одностраничные приложения (SPA), где пользователь может перемещаться по разным URL, и каждый URL отображает нужный компонент без перезагрузки всей страницы.

SPA (Single Page Application) – это тип веб-приложений, которые загружают только одну HTML-страницу и динамически обновляют ее содержимое без перезагрузки страницы. Вместо того, чтобы загружать новые страницы с сервера при каждом переходе, SPA загружают только необходимые данные и обновляют содержимое на текущей странице, используя JavaScript и AJAX-запросы.

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

Установка React Router

В первую очередь, создайте новый проект React.

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

После этого установите React Router DOM, которая работает в веб-приложениях.

			npm install react-router-dom
		

Создание простых маршрутов

Допустим, у вас есть два компонента: Home.js и About.js, которые вы хотите использовать для отображения на разных страницах.

Создайте эти компоненты в вашем проекте:

			// Home.js
import React from 'react';

function Home() {
  return (
    <div>
      <h2>Домашняя страница</h2>
      {/* Здесь можно разместить содержимое для домашней страницы */}
    </div>
  );
}

export default Home;
		

			// About.js
import React from 'react';

function About() {
  return (
    <div>
      <h2>О нас</h2>
      {/* Здесь можно разместить содержимое для страницы "О нас" */}
    </div>
  );
}

export default About;
		

Отредактируйте App.js, чтобы добавить маршруты для созданных вами компонентов.

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

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;
		

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

			npm start
		

Теперь откройте браузер и перейдите по адресу ниже, чтобы открыть страницу Home.

			http://localhost:3000/
		

Откройте About, чтобы увидеть страницу “О нас”.

			http://localhost:3000/about
		

Поздравляем, вы настроили простую маршрутизацию.

Создание вложенных маршрутов

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

Давайте представим, что у вас есть веб-приложение с разными страницами: “Главная”, “О нас”, “Контакты”. Каждая из этих страниц может содержать свои собственные разделы с дополнительным контентом и функциональностью.

Вложенная маршрутизация позволяет создавать подразделы внутри этих страниц. Например, на странице “О нас” вы можете иметь свои собственные подстраницы: “История”, “Команда”, “Наши ценности”.

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

Давайте представим, что у нас есть компонент Dashboard, который имеет свою собственную маршрутизацию для отображения различных частей панели управления, таких как Overview, Settings, Profile и так далее.

			// Dashboard.js

import React from 'react';
import { Route, Link, Switch, useRouteMatch } from 'react-router-dom';
import Overview from './Overview';
import Settings from './Settings';
import Profile from './Profile';

function Dashboard() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Панель управления</h2>
      <nav>
        <ul>
          <li>
            <Link to={`${url}/overview`}>Обзор</Link>
          </li>
          <li>
            <Link to={`${url}/settings`}>Настройки</Link>
          </li>
          <li>
            <Link to={`${url}/profile`}>Профиль</Link>
          </li>
        </ul>
      </nav>
      
      {/* Вложенная маршрутизация */}
      <Switch>
        <Route exact path={path}>
          {/* Компонент по умолчанию, отображаемый при открытии панели управления */}
          <Overview />
        </Route>
        <Route path={`${path}/overview`}>
          <Overview />
        </Route>
        <Route path={`${path}/settings`}>
          <Settings />
        </Route>
        <Route path={`${path}/profile`}>
          <Profile />
        </Route>
      </Switch>
    </div>
  );
}

export default Dashboard;
		

В компоненте Dashboard мы используем useRouteMatch из React Router, чтобы получить текущий путь и URL. Используя Link, мы создаем ссылки для перехода к разным частям панели управления. Внутри Switch мы определяем вложенные маршруты для отображения компонентов в зависимости от текущего URL.

Каждый вложенный маршрут начинается с ${path}, чтобы создавать правильные вложенные URL для компонентов. Это помогает React Router правильно выбирать, какой компонент отобразить на экране при совпадении URL.

В реальных приложениях структура и вложенность маршрутов может быть сложнее, но основной принцип остается тем же.

Итоги

1. React Router – это библиотека для маршрутизации компонентов в веб-приложении;
2. Библиотека помогает создавать одностраничные приложения (SPA), которые подгружают не всю страницу при переходе, а только нужные компоненты, чтобы ускорить сайт;
3. Кроме простой маршрутизации, есть и вложенная. Она помогает изменять компоненты, если внутри элементов есть другие динамические элементы.
4. Чтобы настроить маршрутизацию, используйте хуки из React Router DOM.