Как передать состояние или данные в react-router v6

RedDeveloper
17.03.2022 18:11
Как передать состояние или данные в react-router v6

Reactjs

Передача данных одного компонента другому компоненту с помощью react-router (v6) Link Component.

React-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного компонента к другому компоненту, используя компонент react-router Link.

В новой версии react-router (v6) данные передаются более легко. Например, вы можете передавать данные объекта в одном компоненте другому компоненту.

Вы можете играть с кодом в кодовой песочнице Browser base Ide.

Поиграть с кодом

Как передать параметры в react-router-dom Link?

Шаги

  1. Передать данные
  2. Получить доступ к данным

Передать данные

  1. Первый шаг
  2. Второй шаг
  3. Третий шаг

Первый шаг

Первый шаг импортируйте компонент Link в react-router-dom

import { Link } from "react-router-dom";

Второй шаг

Во втором шаге я создаю состояние с помощью хука useState в reactjs и передаю данные по умолчанию в useState.

const [data, setData] = useState({ id: "1t4",
   title: " Как передать состояние в react-router-dom",
   tag: ["reactjs", "react-router-dom"].
}); // первый пример
const [data, setData] = useState(false); второй пример

Примечание

В компонент react-router-dom Link можно передавать что угодно. Для примера я передаю объект и булево значение.

Третий шаг

На третьем этапе мы передаем состояние как объект от одного компонента к другому. Другими словами, мы передаем данные present дочернему компоненту.

// вы передаете состояние в виде объекта<Link
to = "/apple" state = {{ data: data }} className = "link">.
   Apple
</Link>

Примечание

В react-router v6 состояние передается в виде объекта. Если передать состояние в виде строки, то возникнет ошибка.

Доступ к данным

Доступ к данным в дочернем компоненте, react-router (v6), предоставляет хук для доступа к данным.

  1. Импортный хук
  2. Доступ к данным

Импортный хук

Сначала вы импортируете хук useLocation, с помощью которого компонент получает доступ к данным или состоянию.

import { useLocation } from "react-router-dom";

Получить доступ к данным

Используйте хук useLocation react-router для доступа к состоянию, присутствующему в дочернем компоненте.

import React from "react";
import { useLocation } from "react-router-dom";
export default function ApplePage(props) {
const location = useLocation();
console.info(props, " props");
console.info(location, " useLocation Hook");
const data = location.state?.data;
return (
   <div className = "page">
     🍎 Страница
     <h1> {data ? data.title : "Перейти на главную страницу"} </h1>
   </div>
);
}
Доступ к данным, присутствующим в дочернем компоненте
Доступ к данным, присутствующим в дочернем компоненте

Примечание

Чаще всего новые люди передают состояние в компонент ссылки и доступ к реквизитам. Поэтому в react-router это не работает.

Советы

  1. Вы не можете получить доступ к состоянию непосредственно в дочернем компоненте. Вместо этого вы увидите неопределенный хук в консоли.
  2. Вы не можете получить доступ к состоянию react-router в props.

Ссылки

Заключение

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

Не стесняйтесь ставить лайк и делиться моей статьей с другими, если вам понравилась моя статья. Вы также можете подписаться на Twitter official_R_deep.

Https://officialrajdeepsingh.dev/

Руководство для начинающих по веб-разработке на React.js
Руководство для начинающих по веб-разработке на React.js

21.03.2023 12:23

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

Разница между Angular и React
Разница между Angular и React

21.03.2023 07:56

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые делают их подходящими для различных проектов веб-разработки.

Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit
Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit

20.03.2023 14:01

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

Калькулятор CGPA 12 для семестра
Калькулятор CGPA 12 для семестра

20.03.2023 12:24

Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие действия:

ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023
ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023

20.03.2023 11:15

О тренинге HTML JavaScript :HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) - две основные технологии для создания веб-страниц. HTML обеспечивает структуру страницы CSS (визуальное и звуковое) оформление для различных устройств. Наряду с графикой и сценариями HTML и CSS являются...

Как собрать/развернуть часть вашего приложения Angular
Как собрать/развернуть часть вашего приложения Angular

20.03.2023 08:46

Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?