React-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного компонента к другому компоненту, используя компонент react-router Link.
В новой версии react-router (v6) данные передаются более легко. Например, вы можете передавать данные объекта в одном компоненте другому компоненту.
Вы можете играть с кодом в кодовой песочнице Browser base Ide.
Как передать параметры в react-router-dom Link?
Первый шаг импортируйте компонент 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), предоставляет хук для доступа к данным.
Сначала вы импортируете хук 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 это не работает.
Надеюсь, моя статья решила вашу проблему. Если у вас есть вопросы, задавайте их в разделе комментариев.
Не стесняйтесь ставить лайк и делиться моей статьей с другими, если вам понравилась моя статья. Вы также можете подписаться на Twitter official_R_deep.
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.