React Router를 사용하여 페이지 간에 데이터를 어떻게 전달할 수 있나요?

React Router 페이지 간 데이터 전달

개요

React Router는 React 애플리케이션에서 탐색을 구현하기 위한 강력한 라이브러리입니다. 이를 통해 경로를 정의하고 페이지 전환을 원활하게 처리할 수 있습니다. 일반적인 사용 사례 중 하나는 표시 또는 추가 처리를 위해 페이지 간에 데이터를 전달하는 것입니다.

해결책:

옵션 1: 경로 상태

React Router v6을 사용하면 상태를 사용할 수 있습니다. 탐색할 때 데이터를 전달하기 위해 Link 또는 Navigate 구성 요소의 속성을 사용합니다. 이 데이터는 대상 페이지의 위치 개체를 통해 액세스할 수 있습니다.

옵션 2: URL 경로

또 다른 옵션은 : 표기법을 사용하여 데이터를 URL 경로에 통합하는 것입니다. 데이터는 대상 페이지의 일치 소품에서 검색할 수 있습니다.

옵션 3: URL 쿼리 문자열

URL 경로를 사용하는 것과 유사하게 다음을 사용하여 URL 쿼리 문자열에 데이터를 추가할 수 있습니다. ? 상징. 이 데이터는 useSearchParams 후크 또는 대상 페이지의 위치 개체 검색 속성을 통해 액세스할 수 있습니다.

예:

사용자 목록에서 사용자로 이동하려는 시나리오를 고려해보세요. 세부정보 페이지입니다.

// User List Page
import React, { Component } from "react";

export default class User extends Component {
  render() {
    return (
      {this.props.users.map(user => (
        <Link key={user.id} to={`/user/${user.id}`}>
          {user.name}
        </Link>
      ))}
    );
  }
}

// User Details Page
import React from "react";
import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();
  return (
    {id}
  );
}

이 예에서는 사용자가 사용자 이름을 클릭하면 URL 경로를 통해 사용자 ID를 받는 UserDetails 페이지로 이동했습니다.

위 내용은 React Router를 사용하여 페이지 간에 데이터를 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!