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.
Https://officialrajdeepsingh.dev/
21.03.2023 12:23
Веб-разработка - это захватывающая и постоянно меняющаяся область, которая постоянно развивается благодаря новым технологиям и тенденциям. Одним из самых популярных фреймворков для веб-разработки сегодня является React.js. Если вы начинающий веб-разработчик и хотите узнать больше о React.js, это...
21.03.2023 07:56
React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые делают их подходящими для различных проектов веб-разработки.
20.03.2023 14:01
Веб-скрейпинг, как мы все знаем, это дисциплина, которая развивается с течением времени. Появляются все более сложные средства борьбы с ботами, а также новые инструменты веб-скраппинга с открытым исходным кодом для их обхода.
20.03.2023 12:24
Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие действия:
20.03.2023 11:15
О тренинге HTML JavaScript :HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) - две основные технологии для создания веб-страниц. HTML обеспечивает структуру страницы CSS (визуальное и звуковое) оформление для различных устройств. Наряду с графикой и сценариями HTML и CSS являются...
20.03.2023 08:46
Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?