How to Efficiently Pass Data Between React Router Pages?-JS Tutorial-php.cn

How to Efficiently Pass Data Between React Router Pages?

Linda Hamilton

Release： 2024-12-17 06:59:25

Original

629 people have browsed it

How to Efficiently Pass Data Between React Router Pages?

How to Pass Data from One Page to Another Using React Router

Problem:

Navigating from a list of items to a detail page, passing along the details of the selected item.

Solution:

There are three main options for passing data between pages using React Router:

Option 1: Pass Route State

Send the item ID in the route's state:

v6 (Declarative):

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

Copy after login

v6 (Imperative):

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

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

Copy after login

v5 (Declarative):

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

Copy after login

v5 (Imperative):

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

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

Copy after login

Receive the state in the destination component:

v6:

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

Copy after login

v5:

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

Copy after login

Option 2: Pass Something in the URL Path

Include the item ID in the URL path:

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

Copy after login

Receive the parameter in the destination component:

v6:

const { infoId } = useParams();

Copy after login

v5:

const infoId = props.match.params.infoId;

Copy after login

Option 3: Pass Something in the URL Query String

Append the item ID to the URL query string:

v6 (Declarative):

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

Copy after login

v6 (Imperative):

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

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

Copy after login

v5 (Declarative):

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

Copy after login

v5 (Imperative):

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

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

Copy after login

Receive the query param in the destination component:

v6:

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

Copy after login

v5:

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

Copy after login

The above is the detailed content of How to Efficiently Pass Data Between React Router Pages?. For more information, please follow other related articles on the PHP Chinese website!