Полное руководство по React Router v6. Часть 1 - Основы React Router
2 года назад·3 мин. на чтение
React Router — самая популярная библиотека маршрутизации в React, но разобраться в некоторых из более сложных функций может быть немного сложно. В этой серии статей рассмотрим все, что вам нужно знать о React Router, чтобы вы могли с легкостью использовать даже самые продвинутые функции.
Серия статей о React Router v6 состоит из 4 частей.
- Основы React Router (рассматривается в этой статье)
- Продвинутые определения маршрутов
- Управление навигацией
- Подробно о роутерах
Основы 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, вам нужно сделать три вещи.
- Настроить роутер
- Прописать свои маршруты
- Управлять навигацией
Настройка роутера
Настройка роутера является самым простым шагом. Все, что вам нужно сделать, это импортировать конкретный роутер, который вам нужен (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
.Как создать компонент carousel на ReactJS (видео уроки)
2 года назад·1 мин. на чтение