ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Полное руководство по React Router v6. Часть 1 - Основы React Router
год назад·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
.Кастомный хук для диспатчинга Redux экшенов
2 года назад·1 мин. на чтение
В этой статье напишем кастомный хук для вызова action creator’а Redux вместе с dispatch() внутри.
Часто, вызывая action creator, мы забываем обернуть его в
Допустим, мы работаем над приложением списка задач, и у нас есть действие
В компоненте вызов будет выглядеть следующим образом.
dispatch()
, а вместо этого вызываем как обычная функцию. Таким образом action не доходит до редьюсера.
Мы создадим собственный хук, в котором будет выполняться обертывание вызова функции вaddProductToCart(product); // не верно dispatch(addProductToCart(product)); // верно
dispatch()
, чтобы мы могли отправлять наши экшены, вызывая их как обычные функции с уже встроенным диспатчингом.
Реализация довольно проста.import { useCallback } from 'react'; import { useDispatch } from 'react-redux'; export const useWithDispatch = (fn) => { const dispatch = useDispatch(); return useCallback( payload => () => dispatch(fn(payload)), [dispatch, fn] ) }
useWithDispatch
— это функция высшего порядка, поскольку она принимает функцию (action creator) в качестве аргумента и возвращает другую функцию, которая при вызове вызовет переданную функцию, обернутую с помощью dispatch()
. Обязательно запоминаем функцию обратного вызова с помощью useCallback
.
addTask()
, которое берет текст задачи и добавляет его в список задач:
// actions.js const addTaskAction = (text) => { return { type: 'ADD_TASK', payload: { id: 'some-id', text } } }
import { addTaskAction } from './actions'; export const Component = () => { const addTask = useWithDispatch(addTaskAction); const handleClick = () => { addTask('Learn Redux'); } // ... }
Итоги
Я надеюсь, что вы нашли этот пост полезным. Вам по-прежнему нужно помнить о передаче создателей действий (action creator) вuseWithDispatch
, но будет легче запомнить, что вы делаете это в самом начале, а не при их вызове.