Маршрутизация в веб: React Router и Express для начинающих

Маршрутизаторы в веб-разработке — это как путеводители 🧭, которые помогают вашему сайту или приложению знать, куда "идти" 🚦, когда пользователь запрашивает определённую страницу или функцию.

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

Это важно, потому что упрощает создание интерактивных и динамических веб-приложений. Понимание маршрутизации позволяет разработчикам строить сложные и масштабируемые проекты, делая их более доступными и удобными для пользователей.

Пример

Представьте, что вы строите дом с несколькими комнатами: кухней, гостиной и спальней. В каждой комнате есть свой свет, который вы хотите включать, не входя в комнату. Для этого у входной двери вы установили пульт с кнопками, каждая из которых включает свет в определенной комнате. Этот пульт — как роутер в мире веб-приложений.

🔹 Пример с кодом на React Router:

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

function Home() {
  return <h2>Домашняя страница</h2>;
}

function Kitchen() {
  return <h2>Кухня</h2>;
}

function LivingRoom() {
  return <h2>Гостиная</h2>;
}

function Bedroom() {
  return <h2>Спальня</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Домой</Link>
            </li>
            <li>
              <Link to="/kitchen">Кухня</Link>
            </li>
            <li>
              <Link to="/living-room">Гостиная</Link>
            </li>
            <li>
              <Link to="/bedroom">Спальня</Link>
            </li>
          </ul>
        </nav>

        {/* Определение маршрутов */}
        <Route path="/" exact component={Home} />
        <Route path="/kitchen" component={Kitchen} />
        <Route path="/living-room" component={LivingRoom} />
        <Route path="/bedroom" component={Bedroom} />
      </div>
    </Router>
  );
}

export default App;

В этом примере BrowserRouter (роутер) управляет навигацией по вашему "дому" (веб-приложению). Каждый Route соответствует комнате, а Link — это кнопки на вашем пульте, позволяющие переключаться между комнатами (страницами) без необходимости "входить" в каждую из них физически (перезагружать страницу). Таким образом, вы можете легко перемещаться по разделам вашего приложения, так же как и по комнатам в доме, используя один удобный пульт (меню навигации).

Первые шаги с React Router

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

Как использовать React Router

Чтобы начать работу с React Router, необходимо установить пакет react-router-dom в ваш проект. Это делается с помощью команды npm install react-router-dom или yarn add react-router-dom, в зависимости от вашего менеджера пакетов.

После установки вы можете начать определять маршруты в вашем приложении. Основные элементы, с которыми вам предстоит работать:

• <BrowserRouter>: оболочка вокруг вашего приложения, которая использует HTML5 history API для синхронизации UI с URL.
• <Route>: компонент, который отображает UI, если его путь совпадает с текущим URL.
• <Link>: заменяет тег <a> для создания навигации внутри вашего приложения без перезагрузки страницы.

🔹 Простой пример:

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Главная</Link>
          <Link to="/about">О нас</Link>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

Основы маршрутизации в Express

Express — это фреймворк для Node.js, который упрощает создание серверной части веб-приложений. Маршрутизация в Express позволяет связывать HTTP-запросы с конкретными функциями обработки, что делает управление запросами и ответами сервера гибким и удобным.

Подробнее об этом расскажет наш спикер на видео

Создание маршрутов в Express

Маршруты в Express определяются с помощью методов app.get(), app.post(), app.put(), и так далее, в зависимости от типа HTTP-запроса. Каждый маршрут может иметь одну или несколько функций обработки, которые выполняются, когда маршрут совпадает с URL запроса.

🔹 Пример маршрута:

const express = require('express');
const app = express();

app.get('/', function(req, res) {
  res.send('Главная страница');
});

app.get('/about', function(req, res) {
  res.send('О нас');
});

app.listen(3000, function() {
  console.log('Приложение запущено на порту 3000');
});

Создание собственного маршрутизатора

Хотя использование готовых библиотек, таких как React Router или Express Router, значительно упрощает разработку, понимание того, как работает маршрутизация на низком уровне, может быть полезным. Создание простого маршрутизатора в JavaScript поможет вам лучше понять принципы маршрутизации.

Простой маршрутизатор на JavaScript

Создать базовый маршрутизатор можно, используя объект window.location для определения текущего пути и history.pushState для изменения URL без перезагрузки страницы.

🔹 Пример кода:

function navigate(path) {
  history.pushState(null, '', path);
  router();
}

function router() {
  const routes = {
    '/': 'Главная страница',
    '/about': 'О нас',
  };
  const path = window.location.pathname;
  const route = routes[path];
  document.getElementById('app').innerHTML = route || 'Страница не найдена';
}

window.onpopstate = router;
window.route = navigate;

router();

Плюсы и минусы готовых библиотек

Использование готовых библиотек маршрутизации, таких как React Router и Express Router, предлагает множество преимуществ:

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

Однако, создание собственного решения для маршрутизации может быть полезным для:

• Лучшего понимания принципов маршрутизации.
• Создания уникального решения, полностью адаптированного под нужды вашего проекта.

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