Асаліны React Router: BrowserRouter, маршруты, паспрацованне з Route і Link

Большасць дапраў на React скора патрабуюць калькі з экранаў, такіх як Галоўная, Аб нас, Продукты і Кантакты. Сам React не мае панявы пра URL-адрэсы, таму супарабатоўка адрес з экранамі выканана праз бібліятэку, зазвычай React Router. Чатыры з яе компанентаў пакрываюць большасць звычайных сцэнарыяў маршрутацыі: <BrowserRouter>, <Routes>, <Route> і <Link>. Калі вы зразумеете, што робіць кожны з іх і як яны вярнююцца, вы зможаце стварыць багатоэкранную аплікацыю у формате однага экрана і поясніць гэта пад час адбору.

BrowserRouter з’ѐеднае React з URL

<BrowserRouter> — гэта сам рутер. Ён дазволяе маршрутацыю з боку кліента чераз API історыі прыгледача, падтрымляючы синхронізацію адобразленай інтэрфейсу з палаткой адрес без неабяжнасці запытваць сервера пра новы дакумент.

Ўжыце яго тады, калі ваша аплікацыя павінна выдаляць разныя URL-адрэсы для сваіх экранаў, пры чым застаўацца адной сторанай, напрыклад:

/
/about
/products
/contact

Установка абыраецца праз абгорткаванне дрэва вашых компонентаў; все, што патрабуе маршрутацыі, должна знаходзіцца ўнутрь яго:

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

Зазвычай яго размешчаюць адназначна, у корэне. Адны з практычных наследкав: так как такія шляхі, як /about, ўжо є рэальнымі URL-адрэсамі, ваш хост павінен служыць той самы index.html для ўсіх іх, інакш паўтарны запуск на /about дае адпаведнае памылкі 404 сервера.

Маршруты выбіраюць, што адобразіць

<Routes> — это контейнер для ваших визначэнняў маршрутаў. Пры кожной змяне месца ён парабягае текущы URL з яго дзецьмі і адобразжае той, што падходзіць. Ўжыце яго тады, калі React Router, а не ручна напісаныя умовныя выразы, павінен вяршыць выбор таго экрана, які будзе адобразжаны:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Хутчэй, элемент <Routes> керуе ўсімі трыма шляхамі. Ён выбірае найлепшы падход, а не першы зі спісу, таму рэдкая патрэба хваліцца апаранням.

Шляхы супараджуюць адны шлях з адним элементам

Кожны <Route> супараджуе шлях URL з элементам, які трэба паказаць, падобна до ентры ў табліцы пошуку:

/about → About component
/products → Products component

Дадзіце по аднам для кожнага URL, які должен паказаць конкрэтны контент. Ключовыя атрыбуты — path і element:

<Route
  path="/about"
  element={<About />}
/>

З такім вакледжэнням, адвячанне да гэтага адресу:

/about

змушвае React Router паказаць:

<About />

Запамятаце, што element прымае вужо запрацаваны элемент (<About />), а не кансэльтатыў на компонент, таму вы можете безпасабліва перадаць атрыбуты. Калькі шляхоў выглядаюць так:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Якщо жаданы пац не знаходзіцца, нічога ў гэтым блаке не атрымлівае атракцыю; звычны спосаб размістыць экран «не знайдзена» — це шаблонны маршрут path="*".

Переход па лінку без перзагрузкі

<Link> перамещае корыстніка между маршрутамі, пры чым дапрыгач застаецца завантажаным. Ён стварае звычны элемент <a> у DOM, але перехопляе клік і дазваляе React Router кераваць навігацыяй. Ожывайце яго для внутрашняй навігацыі, напрыклад у панелі навігацыі:

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Клік на Пра нас адкладзець змены ў URL, <Routes> паўтарна ацэніць стан, і экран «Пра нас» з’явіцца без перзагрузкі браузера, таму спяльны лейаут і стан у памяці застаюцца незменнымі. Для зовнішняй сторонкі ўсё равна паслужыць звычны элемент <a>.

Аб’еднанне всіх элементаў

Мінімальная повна настройка (з Home, About і Contact, які визначены ў іншым месцы):

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Спялунакі і блок <Routes> ўтвараюць групу внутры <BrowserRouter>: навігацыя застаецца видна на кожной старонцы, а толькі рэгіон <Routes> зміняе контэнт. Короткая іерархія:

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> знаходзіцца праз тую ланцюговую структуру як элемент керування, на які клікаюць корыстнікі, каб змяніць URL. У прыкладах выкарыстоўваецца імпорт з react-router-dom; няўзабаве выйшлі новыя версіі, якія таксама адкрываюць гэтыя API з пакета react-router, таму пераканайцеся, што чыталісте документацыю да вашай версіі.

Запитанні пад час адбору

• Што такое <BrowserRouter>? Это рутэр, які дазволяе керуванне маршрутамі з боку кліента і падтрымлеў синхронізацыю інтерфейсу з URL браузера.

Які разніцы межуе <Routes> і <Route>? <Routes> — это контейнер, які падае па URL; кожны <Route> задае адзін шлях і элемент, які трэба атрыбуець.

У чым разніца межуе <Link> і <a>? <Link> дазваляе навігаваць на кліянтскай стороне без пачатковага перазавантажэння; звычны <a> прыводзіць да таго, што браузер зноў завантажвае URL.

Чаму лепей выбіраць <Link> у дапрыемку React Router? Ён памагае заліць дапрыемак у формате однай-сторонней аплікацыі і запобегае непатрэбным пачатковым перазавантажэнням усіяго старонкі.

Можа <Route> працаваць без <BrowserRouter>? Зазвычай няма: компаненты маршрутацыі должны атрыбуецца ў контэксте рутера, такога як <BrowserRouter>.

Ключовыя выводы

• <BrowserRouter> дазваляе рэгулювацыю маршрутаў, аднойчы, у коране.
• <Routes> керуе маршрутамі і адрасавае падходячы элемент.
• <Route> супарабатоўвае URL з компанентам.
• <Link> пераводзіць межы маршрутамі без падгрузкі стораніцы.

Усе вялікія маршруты, дынамічныя фрагменты, захаваныя маршруты і хукі навігацыі будуецца на гэтым жа модэлі. Як React выбірае, што падгрузіць занова калі маршрут змяніўся, пазнайоміцеся з стварэнням ментальнага модэля для React, стану і хуків.

Супаўзеяныя матэрыялы

• Стварэнне ментальнага модэля для React: супрацоўка, стан і хукі — Дазвольце вам зразумець прычыны застосоўкі основных канцэпцый React — супрацоўкі, компонентав, пропаў, стану і хуків — каб развіць інтуўіцыю замест таго, каб запамятаваць API-і.
• React 19.2: адпаведныя пояснення — Activity, useEffectEvent і статычнае адрасаванне — Дазвольце вам дазнацца, як новы компонент Activity, хук useEffectEvent і частковае статычнае адрасаванне ў React 19.2 усунуць схованыя витраты на выконанне у сучасных інтерфейсах.