Написать пост

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

Отредактировано

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

5К открытий25К показов
React Router: что это и как использовать

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

  1. Что такое React Router и кому это нужно
  2. Установка React Router
  3. Создание простых маршрутов
  4. Создание вложенных маршрутов
Используете маршрутизацию?
Нет
Да, в React
Да, в Node.js
Да, но использую другой инструмент

Что такое 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.
Следите за новыми постами
Следите за новыми постами по любимым темам
5К открытий25К показов