Як працює React Router “під капотом”

React Router — це потужна бібліотека для обробки маршрутизації в додатках React. Вона дозволяє розробникам створювати односторінкові додатки (SPA) з кількома виглядами, кожен з яких пов'язаний з конкретним URL. Розуміння того, як працює React Router "під капотом", допомагає розробникам краще використовувати його функціональність та оптимізувати додатки. У цій статті ми розглянемо основні принципи роботи React Router, його компоненти та механізми.

Вступ до React Router

React Router — це набір навігаційних компонентів, які складаються декларативно з вашим додатком. Він надає спосіб обробки маршрутизації в додатку React, дозволяючи визначати маршрути та переміщатися між ними. Бібліотека розроблена так, щоб бути гнучкою та розширюваною, що робить її підходящою для різноманітних додатків.

Ключові функції React Router

1. Декларативна маршрутизація: React Router дозволяє визначати маршрути за допомогою JSX, що робить це простим для розуміння та підтримки.
2. Динамічна маршрутизація: Ви можете створювати динамічні маршрути, які відповідають шаблонам URL і витягують параметри.
3. Вкладена маршрутизація: Підтримує вкладені маршрути, що дозволяє створювати складні структури маршрутів.
4. Ледаче завантаження: Підтримує поділ коду та ледаче завантаження компонентів для кращої продуктивності.
5. Серверна рендеризація (SSR): Може бути використана з серверною рендеризацією для покращеної продуктивності та SEO.

Основні концепції

Маршрути та співпадіння маршрутів

В основі React Router лежить концепція маршрутів. Маршрут — це відображення між шаблоном URL і компонентом React. Коли URL співпадає з шаблоном маршруту, відповідний компонент рендериться.

Співпадіння маршрутів

Співпадіння маршрутів — це процес визначення, який маршрут має бути відображений на основі поточного URL. React Router використовує бібліотеку path-to-regexp для перетворення шаблонів маршрутів в регулярні вирази, які потім використовуються для співставлення з поточним URL.

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

function App() {  
 return (  







 );  
}

У наведеному прикладі компонент Route використовується для визначення маршрутів. Проп path вказує шаблон URL, а проп component визначає компонент, який буде відображений, коли URL співпадає з шаблоном.

Керування історією

React Router використовує бібліотеку History для керування стеком історії браузера. Бібліотека History надає єдиний API для маніпулювання історією браузера в різних середовищах, включаючи браузери та Node.js.

BrowserRouter та HashRouter

React Router надає два основних маршрутизатори: BrowserRouter та HashRouter.

• BrowserRouter: Використовує HTML5 history API для керування стеком історії браузера. Це найбільш часто використовуваний маршрутизатор і підходить для більшості додатків.
• HashRouter: Використовує хеш-частину URL для керування стеком історії. Він корисний для додатків, які потребують підтримки старіших браузерів або середовищ, що не підтримують HTML5 history API.

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

function App() {  
 return (  

 {/* Маршрути тут */}  

 );  
}

Посилання та навігація

React Router надає компонент Link для створення навігаційних посилань. Компонент Link запобігає стандартній поведінці браузера, що полягає в навігації на нову сторінку, і замість цього оновлює URL та рендерить відповідний компонент.

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

function Navigation() {  
 return (  

Home
About
User 123
    );  
}

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

React Router підтримує динамічні параметри маршрутів, що дозволяє витягувати значення з URL та передавати їх у ваші компоненти.
Це корисно для створення динамічного контенту на основі URL.

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

function User() {  
 const { id } = useParams();  
 return 
User ID: {id}
;  
}  

У наведеному прикладі хук useParams використовується для витягування параметра id з URL.

Під капотом

Context API

React Router сильно залежить від Context API для керування та обміну станом маршрутизації в додатку. Context API надає спосіб передавати дані через дерево компонентів без необхідності вручну передавати пропси на кожному рівні.

Router Context

Компонент Router створює контекст, який надає поточне розташування та об'єкт історії своїм дочірнім компонентам. Цей контекст використовується іншими компонентами маршрутизації, такими як Route та Link, для доступу до стану маршрутизації.

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

function useRouter() {  
  return React.useContext(RouterContext);  
}  

Об'єкти Location та History

Об'єкт location представляє поточний URL та його розібрані частини, такі як шлях, запит та хеш. Об'єкт history надає методи для навігації та маніпулювання стеком історії браузера.

function useLocation() {  
  const { location } = useRouter();  
  return location;  
}  

function useHistory() {  
  const { history } = useRouter();  
  return history;  
}  

Алгоритм співпадіння

React Router використовує алгоритм співпадіння для визначення, який маршрут слід відобразити на основі поточного URL. Алгоритм працює наступним чином:

1. Path-to-RegExp: Перетворює шлях маршруту в регулярний вираз.
2. Match: Порівнює регулярний вираз з поточним URL.
3. Rank: Оцінює маршрути за специфічністю та іншими критеріями.
4. Render: Відображає компонент, пов'язаний з маршрутом, що має найвищий рейтинг.

Вкладена маршрутизація

React Router підтримує вкладену маршрутизацію, що дозволяє створювати складні структури маршрутів. Вкладені маршрути визначаються шляхом вкладення компонентів Route один в одного.

function App() {  
  return (                               
    // Ваші маршрути тут
  );  
}  

У наведеному прикладі компонент Users містить вкладений маршрут для окремих користувачів. Коли URL співпадає з /users/:id, відображаються як компоненти Users, так і User.

Розширені теми

Поділ коду та ледаче завантаження

React Router підтримує поділ коду та ледаче завантаження компонентів за допомогою функцій lazy та Suspense з React. Це дозволяє розділяти додаток на менші частини, які завантажуються за потребою, покращуючи продуктивність.

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

const Home = lazy(() => import('./Home'));  
const About = lazy(() => import('./About'));  
function App() {  
  return (  
    <Suspense fallback={<div>Loading...</div>}>  
      {/* Ваші маршрути тут */}  
    </Suspense>  
  );  
}  

Серверна рендеризація (SSR)

React Router можна використовувати з серверною рендеризацією для покращення продуктивності та SEO.
При використанні SSR сервер рендерить початковий HTML і відправляє його клієнту, який потім гідратує додаток.

import { StaticRouter } from 'react-router-dom/server';  
import { renderToString } from 'react-dom/server';  
import App from './App';

function handleRequest(req, res) {  
 const context = {};  
 const html = renderToString(  



 );  
 res.send(`  







${html}
            `);  
}  

Користувацькі хуки

React Router надає кілька користувацьких хуків для доступу до стану маршрутизації та виконання навігації. До таких хуків відносяться useHistory, useLocation, useParams та useRouteMatch.

import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

function MyComponent() {  
 const history = useHistory();  
 const location = useLocation();  
 const params = useParams();  
 const match = useRouteMatch(); // Використовуйте стан маршрутизації за потреби  
}  

Найкращі практики

Організація маршрутів

Організуйте ваші маршрути таким чином, щоб ваш додаток було легко зрозуміти та підтримувати. Групуйте пов'язані маршрути разом і використовуйте вкладені маршрути для складних структур.

function App() {  
 return (                                               
   // Ваші маршрути тут  
 );  
}  

Обробка сторінок 404

Завжди включайте маршрут, який обробляє сторінки 404. Це гарантує, що користувачі побачать дружнє повідомлення про помилку, коли вони намагатимуться перейти за неіснуючим маршрутом.

function App() {  
 return (                                
   // Ваши сторінки тут  
 );  
}  

Оптимізація продуктивності

Використовуйте поділ коду та ледаче завантаження, щоб покращити продуктивність вашого додатку. Крім того, розгляньте можливість використання серверної рендеризації для покращення початкового часу завантаження та SEO.

const Home = lazy(() => import('./Home'));  
const About = lazy(() => import('./About'));

function App() {  
 return (  
   <Suspense fallback={<div>Loading...</div>}>  
     {/* Ваші маршрути тут */}  
   </Suspense>  
 );  
}  

Висновок

React Router — це потужна та гнучка бібліотека для обробки маршрутизації в додатках React. Розуміння того, як вона працює під капотом, дозволяє розробникам краще використовувати її функції та оптимізувати додатки. Незалежно від того, чи ви створюєте простий односторінковий додаток, чи складне корпоративне рішення, React Router надає інструменти, необхідні для створення безшовного та ефективного досвіду маршрутизації.

Майбутні напрямки

Оскільки React та веб-екосистема продовжують розвиватися, React Router, ймовірно, зазнає подальших покращень та нових функцій. Слідкуйте за офіційною документацією та ресурсами спільноти, щоб бути в курсі останніх розробок та найкращих практик.

Опановуючи React Router, ви можете створювати надійні та високопродуктивні додатки React, які забезпечують відмінний користувацький досвід. Удачі в кодингу!

Перекладено з: How React Router Works Under the Hood