Реагировать на хуки маршрутизатора

Речь идет об хуках useHistory, useLocation, useRouteMatch и useParams.

Самая популярная библиотека в React для обработки маршрутизации — React Router. С выпуском React 16.8 и React Hooks в React Router также появились хуки, упрощающие доступ к состоянию маршрутизатора и выполнение навигации.

В этой статье мы рассмотрим около 4 хуков, включенных в React Router API, которые включают следующее:

1. история использования
2. использованиеМестоположение
3. использование RouterMatch
4. useParams

Чтобы использовать любой из следующих хуков, нам сначала нужно импортировать их из react-router-dom.

import { useHistory,useLocation } from ‘react-router-dom;

Затем нам нужно вызвать его в функциональном компоненте.

// inside of a functional component
const history = useHistory();
const location= useLocation();

История США

Одной из основных зависимостей пакета React Router является пакет history. Пакет history позволяет вам управлять историей сеансов в приложении JavaScript.

import { useHistory} from ‘react-router-dom;
const history = useHistory();

Хук useHistory возвращает объект со многими свойствами и методами.

Некоторые из наиболее распространенных свойств и методов включают следующее:

• go(n) -(функция) Перемещает указатель в стеке истории на n записей.
• goBack() -(функция) Перемещает указатель в стеке истории на -1.
• goForward() -(функция) Перемещает указатель в стеке истории на +1.
• length-(число) Количество записей в стеке истории.
• location – (объект) объект текущего местоположения.
• push(путь) -(функция) Помещает новую запись в стек истории.
• replace(путь) -(функция) Заменить текущую запись в стеке истории
• действие-(строка) Текущее действие (PUSH, REPLACE или POP)
• block(запрос) — (функция) запрещает навигацию

Например, я могу добавить метод push в качестве слушателя onClick к кнопке. Затем, если я нажму на кнопку, я буду перенаправлен на соответствующий URL-адрес.

<button onClick={() => history.push("/home")}>
  Home
</button>
//or
history.go(-2)//2,-1,3,-2
history.goBack()
history.goForward()

использованиеМестоположение

Хук useLocation возвращает объект местоположения. Это тот же самый объект, который присутствует и в хуке useHistory.

import { useLocation } from 'react-router-dom';
const location = useLocation();

Объект местоположения состоит из следующих свойств:

• hash — (string) Фрагмент хеша URL (#).
• pathname – (строка) путь к URL-адресу.
• search — (string) Строка запроса URL (?).

Например, я добавлю параметр поиска и к URL.

http://localhost:3000/dashboard?searchText

Затем, если я вызову хук useLocation по этому URL-адресу, объект местоположения будет выглядеть так.

использованиеRouteMatch

Хук useRouteMatch возвращает объект.

import { useRouteMatch } from 'react-router-dom';
const match = useRouteMatch();

Хук useRouteMatch пытается сопоставить текущий URL так же, как <Route>. Это в основном полезно для получения доступа к данным матча без фактического рендеринга <Route>. Он будет содержать следующие свойства:

• isExact — (логическое значение) Проверяет, совпал ли весь URL.
• params — (объект) пары "ключ-значение", извлеченные из URL-адреса.
• путь — (строка) шаблон пути, используемый для сопоставления.
• url – (строка) совпадающая часть URL-адреса.

Например, я посещаю http://localhost:3000/dashboard. Тогда объект соответствия будет выглядеть следующим образом.

Если я зайду, http://localhost:3000/dashboard/111 вы увидите, что для свойства isExact теперь установлено значение false. Это связано с тем, что весь путь URL-адреса не совпадает точно.

useParams

Хук useParams возвращает объект пар ключ/значение параметров URL. Это тот же объект params, который мы видели в объекте match из хука useRouteMatch. Используйте его для доступа к match.params текущего <Route

import { useParams } from 'react-router-dom';
const params = useParams();

Ключи будут исходить из параметров, которые мы задали при добавлении маршрутов. Например, когда я добавляю следующий маршрут:

<Route path="/dashboard/:id" component={Dashboard} />

Тогда объект параметров этого маршрута http://localhost:3000/dashboard/1 будет выглядеть примерно так.

{id : "1"}

Мы можем изменить имя ‘:id’ в маршруте на любой ключ, и ключ в объекте params изменится соответственно. Например, я добавлю следующий маршрут:

<Route path="/dashboard/:firstid/:secondid" component={Dashboard} />

Затем, когда мы посетим http://localhost:3000/home/11/22., объект params будет выглядеть следующим образом.

{firstid :"11", secondid :"22" }

Заключение

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

Ресурсы

• https://reactrouter.com/web/api/хуки

Найдите меня здесь и спасибо за чтение:

• Твиттер
• ЛинкедИн