React中通过Link传递的state在目标页面显示undefined的原因？

我通过Link组件从MovieCard组件传递state movie，在首页渲染MovieCard时控制台能正常打印该state，但跳转到详情页后state却显示为undefined。已经检查过路由路径配置，问题仍未解决，希望能将MovieCard中的电影详情传递到独立详情页并展示。

相关代码 #

MovieCard组件

import React, { useState } from "react";
import { Link } from "react-router-dom";

const MovieCard = ({ poster, movie, id }) => {
  console.log("Movie card detailsssssss", movie);

  return (
    <div className="sm:w-[300px] sm:h-[300px] w-[100%] h-[300px] ">
      <Link
        to={{ pathname: `/detail/${id}`, state: { movie } }}
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          src={poster}
          className="w-full h-full object-cover rounded-md cursor-pointer hover:scale-105 transition-transform duration-300"
        />
      </Link>
    </div>
  );
};

export default MovieCard;

Detail组件

import React from "react";
import { useParams, useLocation } from "react-router-dom";

const Detail = () => {
  const { id } = useParams();
  const { state } = useLocation();

  const detail = state?.movie;
  console.log("Details", detail);

  return (
    <div>
      <h1>Details page</h1>
      <p>Movie id : {id}</p>
      {detail ? <p>Movie detail: {detail.title}</p> : <p>Loading...</p>}
      <button onClick={() => window.history.back()}>Back</button>
    </div>
  );
};

export default Detail;

问题原因 #

你给Link组件加了target="_blank"，这会在新标签页打开详情页。而React Router的state是存在当前页面的history栈里的，新标签页会生成一个全新的history上下文，根本拿不到原页面的state数据，所以详情页里的state自然是undefined。

解决方案 #

方案1：移除新标签页跳转（最简单） #

如果不需要在新标签页打开详情页，直接删掉Link的target="_blank"和rel="noopener noreferrer"属性就行：

// 修改MovieCard里的Link
<Link to={{ pathname: `/detail/${id}`, state: { movie } }}>
  <img
    src={poster}
    className="w-full h-full object-cover rounded-md cursor-pointer hover:scale-105 transition-transform duration-300"
  />
</Link>

方案2：通过URL参数传递数据（必须开新标签页时用） #

如果一定要在新标签页打开，就别依赖state传数据了，把需要的信息（比如电影id、标题）拼到URL的查询参数里，详情页再解析这些参数：

修改MovieCard的Link

<Link
  to={`/detail/${id}?title=${encodeURIComponent(movie.title)}`}
  target="_blank"
  rel="noopener noreferrer"
>
  <img
    src={poster}
    className="w-full h-full object-cover rounded-md cursor-pointer hover:scale-105 transition-transform duration-300"
  />
</Link>

修改Detail组件获取参数

import React from "react";
import { useParams, useSearchParams } from "react-router-dom";

const Detail = () => {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const title = searchParams.get("title");

  // 如果需要完整电影数据，这里用id调用接口获取就行
  console.log("Movie id:", id, "Movie title:", title);

  return (
    <div>
      <h1>Details page</h1>
      <p>Movie id : {id}</p>
      {title ? <p>Movie detail: {title}</p> : <p>Loading...</p>}
      <button onClick={() => window.history.back()}>Back</button>
    </div>
  );
};

export default Detail;

方案3：用全局状态管理（适合多组件共享数据） #

如果你的电影数据需要在多个组件里用，也可以把数据存在全局状态（比如React Context、Redux）里，详情页直接通过id从全局状态里取对应的数据，这种方式不管怎么跳转都能拿到数据。

内容的提问来源于stack exchange，提问作者Anzana Poudel