Руководство по маршрутизатору React

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

В этом уроке я сосредоточусь на react-router-dom, но есть и другие почти идентичные библиотеки.

Если у вас есть эта библиотека, вам нужно сделать три вещи, чтобы использовать React Router.

Настройте свой маршрутизатор
Определите свои маршруты
Управление навигацией

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

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>
)

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

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>
  )
}

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

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>
    </>
  )
}

React Router — это массивная библиотека с множеством замечательных функций, поэтому она является библиотекой маршрутизации для большинства людей. Мне очень нравится, как они справляются с такими вещами, как вложение, поскольку это значительно упрощает создание интуитивно понятных и чистых маршрутов.

Руководство по маршрутизатору React

Похожие вопросы