React Router 페이지 간에 데이터를 효율적으로 전달하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React Router 페이지 간에 데이터를 효율적으로 전달하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-17 06:59:25

원래의

630명이 탐색했습니다.

How to Efficiently Pass Data Between React Router Pages?

React Router를 사용하여 한 페이지에서 다른 페이지로 데이터를 전달하는 방법

문제:

항목 목록에서 탐색 세부정보 페이지로 이동하여 선택한 항목의 세부정보를 전달합니다. item.

해결책:

React Router를 사용하여 페이지 간에 데이터를 전달하는 세 가지 주요 옵션이 있습니다.

옵션 1: 경로 전달 상태

경로에 항목 ID를 보냅니다. 상태:

v6(선언적):

<Link to="/home/userDetails" state={{ infoId: info.id }}>...</Link>

로그인 후 복사

v6(명령형):

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

const navigate = useNavigate();
navigate("/home/userDetails", { state: { infoId: info.id } });

로그인 후 복사

v5 (선언적):

<Link to={{ pathname: '/home/userDetails', state: { infoId: info.id } }}>...</Link>

로그인 후 복사

v5(명령형):

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

const history = useHistory();
history.push({ pathname: '/home/userDetails', state: { infoId: info.id } });

로그인 후 복사

대상의 상태를 수신합니다. 구성 요소:

v6:

const { state: { infoId } = {} } = useLocation();

로그인 후 복사

v5:

if (props.location && props.location.state && props.location.state.infoId) {
  // Access info ID
}

로그인 후 복사

옵션 2: 무언가 전달 URL 경로에

항목 포함 URL 경로의 ID:

<Link to={`/home/userDetails/${info.id}`}>...</Link>

로그인 후 복사

대상 구성 요소에서 매개변수 수신:

v6:

const { infoId } = useParams();

로그인 후 복사

v5 :

const infoId = props.match.params.infoId;

로그인 후 복사

옵션 3: URL 쿼리 문자열에 무언가 전달

URL 쿼리 문자열에 항목 ID를 추가합니다:

v6(선언적):

<Link to={{ pathname: '/home/userDetails', search: `?infoId=${info.id}` }}>...</Link>

로그인 후 복사

v6 (명령형):

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

const navigate = useNavigate();
navigate({ pathname: '/home/userDetails', search: `?infoId=${info.id}` });

로그인 후 복사

v5(선언형):

<Link to={{ pathname: '/home/userDetails', search: `?infoId=${info.id}` }}>...</Link>

로그인 후 복사

v5(명령형):

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

const history = useHistory();
history.push({ pathname: '/home/userDetails', search: `?infoId=${info.id}` });

로그인 후 복사

대상에서 쿼리 매개변수 수신 구성요소:

v6:

const [searchParams] = useSearchParams();
const infoId = searchParams.get("infoId");

로그인 후 복사

v5:

if (props.location && props.location.search) {
  const searchParams = new URLSearchParams(props.location.search);
  const infoId = searchParams.get("infoId");
}

로그인 후 복사

위 내용은 React Router 페이지 간에 데이터를 효율적으로 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!