使用useLocation获取React Router Link的state报undefined错误，如何正确传参？

错误原因 #

useLocation Hook 的返回值本身就是完整的 location 对象，你错误地尝试从返回值中解构不存在的location属性，导致拿到的location变量为undefined，进一步解构state时就触发了报错。

修复方案 #

修改Quiz页面中取值的相关代码：
把原代码中这三行：

const { location } = useLocation();
const { state } = location;
const { videoTitle } = state;

替换为以下代码（额外增加了空值兼容逻辑，避免用户直接在地址栏输入Quiz页面地址访问时无state的场景报错）：

// 直接调用useLocation拿到location对象，无需解构
const { state } = useLocation();
// 从state中取值时增加兜底默认值，兼容无state的场景
const { videoTitle = "" } = state || {};

额外说明 #

react-router-dom v6 版本中，你Videos页面的Link组件to参数传递state的写法是兼容的，不需要修改。

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