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

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

문제:

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

해결책:

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

옵션 1: 경로 전달 상태

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

v6(선언적):

<link to="/home/userDetails" state="{{" infoid: info.id>...

v6(명령형):

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

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

v5 (선언적):

<link to="{{" pathname: state: infoid: info.id>...

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}`}">...

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

v6:

const { infoId } = useParams();

v5 :

const infoId = props.match.params.infoId;

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

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

v6(선언적):

<link to="{{" pathname: search:>...

v6 (명령형):

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

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

v5(선언형):

<link to="{{" pathname: search:>...

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!