React Netflix克隆应用中useLocation获取数据失败：'Property 'movie' does not exist on type 'Location''错误排查

错误点与原因 #

你遇到的问题主要来自两个核心点：

1. 路由数据传递方式错误
   React Router（尤其是v6版本）中，Link组件的to属性不支持直接添加自定义字段（比如你写的movie: params.row）。Location对象的标准属性只有pathname、search、hash、state等，自定义属性不会被路由系统保留，所以你在movie.js里访问location.movie自然拿不到数据。

2. TypeScript类型校验报错
   即使传递方式正确，TypeScript的Location接口默认并没有movie这个属性，直接访问会触发类型不匹配的错误提示。

修复步骤 #

1. 修改movieList.js中的数据传递方式

把movie数据移到state属性中，这是React Router官方推荐的路由间传递状态数据的方式：

// 原代码
<Link to={{ pathname: "/movie/" + params.row._id, movie: params.row }} >
  <button className="productListEdit">Edit</button>
</Link>

// 修改后
<Link 
  to={{ 
    pathname: `/movie/${params.row._id}`, 
    state: { movie: params.row }  // 将movie放入state中传递
  }} 
>
  <button className="productListEdit">Edit</button>
</Link>

// 更简洁的写法
<Link to={`/movie/${params.row._id}`} state={{ movie: params.row }}>
  <button className="productListEdit">Edit</button>
</Link>

2. 在movie.js中正确获取数据

从location.state里取出movie，同时处理state可能为undefined的情况（比如用户直接访问/movie/:id而非从列表跳转）：

// 原代码
const location = useLocation();
const movie = location.movie;

// 修改后
const location = useLocation();
// 解构state并设置默认空对象，避免无数据时报错
const { movie } = location.state || {};

// 可选：容错处理，无数据时跳回列表或显示提示
if (!movie) {
  return <div>Movie data not found!</div>;
}

3. 解决TypeScript类型错误

如果你的项目启用了TypeScript，需要扩展Location接口来识别自定义的state类型：

• 在项目中新建types/react-router.d.ts文件（无types目录则创建）
• 添加以下类型声明：

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

// 根据你的电影数据结构定义类型
interface Movie {
  _id: string;
  title: string;
  img: string;
  genre: string;
  year: string;
  limit: number;
  trailer?: string;
  video?: string;
  isSeries: boolean;
}

declare module "react-router-dom" {
  interface Location {
    state?: {
      movie: Movie;
    };
  }
}

或者临时使用类型断言快速解决：

const location = useLocation();
const { movie } = location.state as { movie: Movie } || {};

（注：Movie需自行定义，不推荐长期用any替代）

额外注意事项 #

• state中的数据存储在浏览器内存中，页面刷新后会丢失。如果需要持久化，建议通过URL传递电影ID，在movie.js中用useParams获取ID后，从后端重新请求数据，这是更稳健的生产级做法。
• 确保路由配置中/movie/:id正确指向Movie组件，否则跳转逻辑会失效。

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