React使用useLocation读取video属性报Cannot read 'video' of undefined错误

这个报错的核心原因是useLocation返回的对象结构不符合你的取值预期：

• react-router-dom v5/v6 中路由跳转传递的自定义参数，都是挂载在location.state属性下，而非直接挂载在location根对象上，你直接取值location.movie拿到的是undefined，尝试读取undefined的video属性就会触发该类型错误。
• 额外触发场景：如果跳转时没有正确传递state参数，就算从state中取值也会得到undefined，同样会触发报错。

分三步处理：

1. 修正参数取值路径，同时添加可选链做空值兼容，避免空值报错
2. 确保路由跳转时正确传递movie参数
3. 新增空值容错逻辑，参数异常时给出提示或跳转回上一页

修改后的Watch组件代码 #

import { ArrowBackOutlined } from "@material-ui/icons";
import { Link, useLocation, useNavigate } from "react-router-dom"; 
import "./watch.scss";
import { useEffect } from "react";

export default function Watch() { 
  const location = useLocation(); 
  const navigate = useNavigate();
  // 从state中取movie，加可选链做空值保护
  const movie = location.state?.movie; 

  // 空值容错处理
  useEffect(() => {
    if(!movie) {
      alert("未获取到有效视频资源，即将返回上一页");
      navigate(-1);
    }
  }, [movie, navigate])

  return ( 
    <>
      <Link to="/">Home</Link>
      {/* 只有movie存在时才渲染video标签，避免渲染报错 */}
      {movie && <video 
        className="video" 
        autoPlay 
        controls 
        src={movie.video} 
      />}
    </>
  ); 
}

跳转端的参数传递示例 #

如果你是用Link组件跳转，写法如下：

<Link to="/watch" state={{ movie: 你的movie数据对象 }}>
  点击观看视频
</Link>

如果你是用useNavigate编程式跳转，写法如下：

const navigate = useNavigate()
// 跳转时第二个参数传state配置
navigate('/watch', { state: { movie: 你的movie数据对象 } })

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