Полное руководство по React Router v6. Часть 1 - Основы React Router

Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router (рассматривается в этой статье)
2. Продвинутые определения маршрутов
3. Управление навигацией
4. Подробно о роутерах

Основы React Router

Прежде чем мы начнем углубляться в расширенные функции React Router, сначала поговорим об основах React Router. Чтобы использовать React Router, вам необходимо запустить npm i react-router-dom для установки React Router. Эта библиотека устанавливает DOM версию React Router. Если вы используете React Native, вам нужно будет установить react-router-native. За исключением этого небольшого отличия, библиотеки работают почти одинаково. В этой статье сосредоточимся на react-router-dom, но, как уже упоминалось, обе библиотеки почти идентичны. Чтобы использовать React Router, вам нужно сделать три вещи.

1. Настроить роутер
2. Прописать свои маршруты
3. Управлять навигацией

Настройка роутера

Настройка роутера является самым простым шагом. Все, что вам нужно сделать, это импортировать конкретный роутер, который вам нужен (BrowserRouter для веба и NativeRouter для мобильных устройств) и обернуть все ваше приложение в этот роутер.

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

Как правило, вы импортируете свой маршрутизатор в файле index.js вашего приложения, и он будет оборачивать компонент App. Роутер работает так же, как контекст в React, и предоставляет всю необходимую информацию вашему приложению, чтобы вы могли выполнять маршрутизацию и использовать все пользовательские хуки из React Router.

Определение маршрутов

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

import { Route, Routes } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/books" element={<BookList />} />
    </Routes>
  )
}

Определить маршруты так же просто, как определить компонент Route для каждого маршрута в приложении, а затем поместить все эти компоненты Route в один компонент Routes. Всякий раз, когда ваш URL-адрес изменяется, React Router будет просматривать маршруты, определенные в вашем компоненте Routes, и он будет отображать содержимое в пропсе element роута Route, который имеет path, соответствующий URL-адресу. В приведенном выше примере, если бы наш URL-адрес был /books, то отображался бы компонент BookList. Преимущество React Router заключается в том, что при переходе между страницами он обновляет только содержимое внутри вашего компонента Routes. Весь остальной контент на вашей странице останется прежним, что повысит производительность и удобство использования.

Управление навигацией

Последним шагом к React Router является обработка навигации. Обычно в приложении вы перемещаетесь с помощью тегов <a>, но React Router использует свой собственный кастомный компонент Link для обработки навигации. Link представляет собой просто оболочку вокруг тега <a>, которая помогает обеспечить правильную обработку всей маршрутизации и условного повторного рендеринга, чтобы вы могли использовать его так же, как обычный тег <a>.

import { Route, Routes, Link } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/books">Books</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<BookList />} />
      </Routes>
    </>
  )
}

В нашем примере мы добавили две ссылки на главную страницу и страницу книг. Вы также заметите, что мы использовали проп to для установки URL-адреса вместо пропса href, который вы привыкли использовать с тегом <a>. Это единственное различие между компонентом Link и тегом <a>, и это то, что вам нужно помнить, так как легко ошибочно случайно использовать проп href вместо to. Еще одна вещь, которую следует отметить в нашем новом коде, заключается в том, что <nav>, который мы создаем в верхней части нашей страницы, находится за пределами нашего компонента Routes, что означает, что при смене страниц этот раздел навигации не будет повторно рендериться, так при изменении URL-адреса изменится только содержимое компонента Routes.

В этой статье разберем одни из самых популярных вопросов, которые вероятнее всего спросят на frontend интервью.

Что такое CORS?

CORS (Cross-Origin Resource Sharing) - механизм, который дает возможность клиенту (агенту) получать разрешение на доступ к ресурсам сервера на домене, который отличается о того, который использует сайт. Механизм использует дополнительные HTTP-заголовки. Если источник документа, с которого происходит запрос на ресурс, отличается от ресурса протоколом, доменом или портом, то считается, что агент делает запрос с другого источника. Т.е. происходит cross-origin HTTP request.

Говорят, что агент пользователя делает запрос с другого источника (cross-origin HTTP request), если источник текущего документа отличается от запрашиваемого ресурса доменом, протоколом или портом.

Для чего нужен CORS?

Браузеры ограничивают запросы с другого источника (cross-origin запросы) в целях безопасности. Такие запросы могут совершать, например, сторонние скрипты, подключенные на сайт. Такие API как Fetch или XMLHttpRequest следуют политике одного источника (same-origin policy). Таким образом, при использовании web-приложением этого API, существует ограничение: домен запрошенных HTTP-ресурсов и домен web-приложения должен быть одним и тем же. Для снятия этого ограничения нужно использовать CORS-заголовки. Следующие вопросы связаны с работой HTTP протокола. Ответы на эти вопросы важно знать. Крупные компании часто задают эти вопросы на собеседованиях на позицию фронтенд разработчика.

Какие существуют HTTP методы?

Эти методы указывают действие, которое должно быть выполнено для указанного ресурса. Также эти методы иногда называют HTTP глаголами. Эти методы отличаются семантикой.

Метод	Описание
GET	извлечение (чтение) данных ресурса
POST	для отправки данных к указанному ресурсу; для изменения состояния и/или побочные эффекты
PUT	для замены данных ресурса данными из запроса
PATCH	для частичного изменения ресурса
DELETE	для удаления ресурса
HEAD	запрос ресурса, но в отличие от GET, без тела ответа
CONNECT	устанавливает туннель к серверу
OPTIONS	для описания параметров соединения с указанным ресурсом
TRACE	для вызова тестового сообщения

Из чего состоит HTTP-запрос?

• HTTP-метод - глагол (например, GET, POST) или существительное (например, OPTIONS, HEAD), которое определяет действие, которое хочет выполнить клиент.
• Путь к ресурсу:
  • протокол (http://)
  • домен (example.com)
  • TCP порт (80)
• Версия HTTP-протокола.
• Заголовки (опционально). Предоставляют дополнительную информацию для сервера.
• Тело запроса (опционально). Некоторые методы (например, POST), могут содержать данные об отправляемом ресурсе.

Что такое HTTP cookie?

HTTP cookie (куки) - это небольшой фрагмент данных, который отправляется сервером в браузер пользователя. Далее браузер может сохранить cookie и отправлять обратно серверу с каждым запросом. Такой механизм позволяет узнать, с одного и того же браузера были отправлены запросы или нет. Это используется, например, для аутентификации пользователя. Сам протокол HTTP не хранит состояние, механизм cookie позволяет добавить в него состояние.

Для чего используют HTTP cookie?

Cookie используются, главным образом, для:

• Управления сеансом (логины, корзины для виртуальных покупок)
• Персонализации (запоминать предпочтения пользователя)
• Мониторинга (отслеживания поведения пользователя)

Получив HTTP-запрос, сервер вместе с ответом может отправить заголовок Set-Cookie. Cookie обычно запоминаются браузером и отправляются в HTTP заголовке с каждым последующим запросом к серверу, который сохранил эти cookie. Cookie можно настраивать, задав срок действия или срок его существования. Также можно указать ограничения на путь и домен. Если флаг HttpOnly не установлен, то доступ к существующим cookies можно получить через JavaScript.

Что такое HTTP?

Протокол передачи гипертекста (Hypertext Transfer Protocol, HTTP). Это протокол прикладного уровня для передачи гипертекстовых документов, таких как HTML. Он создан для связи между веб-браузерами и веб-серверами. Протокол следует классической клиент-серверной модели. Клиент открывает соединение для создания запроса, а затем ждет ответа. HTTP - это протокол без сохранения состояния, т.е. сервер не сохраняет никаких данных (состояние) между двумя парами "запрос-ответ". Несмотря на то, что HTTP основан на TCP/IP, он также может использовать любой другой протокол транспортного уровня с гарантированной доставкой.

Особенности протокола HTTP

Простота. HTTP удобен и прост для восприятия человеком. HTTP сообщения легко читать и тестировать. Расширяемость. За счет HTTP-заголовков можно легко его расширить, добавив новую функциональность на основе соглашений между клиентом и сервером. Нет состояния, но есть сессия. Между разными запросами не существует связи. Однако, cookie позволяют использовать сессии для идентификации пользователей. Соединение управляется на транспортном уровне. Протокол требует надёжность и отсутствие потерянных сообщений. Подходящим транспортным протоколом является TCP.

Отличия HTTP/1.0, HTTP/1.1, HTTP/2

HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом. Открытие соединения требует нескольких обменов сообщениями, и потому это медленный процесс. HTTP/1.1 предоставил конвейерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок Connection.

HTTP/2 добавил мультиплексирование сообщений через простое соединение, помогающее держать соединение теплым и более эффективным. В этой статье рассмотрели топ вопросов на позицию frontend developer, связанных с HTTP протоколом и CORS.