React Router ページ間でデータを効率的に渡すにはどうすればよいですか?

React Router を使用してあるページから別のページにデータを渡す方法

問題:

項目のリストからの移動詳細ページに移動し、選択した内容の詳細を伝えますitem.

解決策:

React Router を使用してページ間でデータを渡すには、主に 3 つのオプションがあります:

オプション 1: ルートを渡すState

ルートのアイテム 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 クエリ内文字列

アイテム ID を URL クエリ文字列に追加します:

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 中国語 Web サイトの他の関連記事を参照してください。