React项目报错TypeError: Cannot read properties of undefined (reading 'search')如何解决

你遇到的报错是react-router-dom版本不兼容导致的：原项目使用的是v5版本，你本地安装的是v6大版本。v6版本做了破坏性更新，移除了路由组件props上默认挂载的location、match、history属性，所以读取props.location时会返回undefined，调用undefined.search就抛出了你遇到的错误。

1. SigninScreen组件修改 #

• 首先修改react-router-dom的导入语句，新增v6提供的useLocation、useNavigate钩子：

import { Link, useLocation, useNavigate } from "react-router-dom";

• 替换组件内props相关的路由操作代码：

// 删除原来通过props读取location、history的逻辑
const location = useLocation();
const navigate = useNavigate();
const redirect = location.search
 ? location.search.split("=")[1]
 : "/";

• 替换跳转逻辑：将props.history.push(redirect)修改为navigate(redirect)。

2. ProductScreen组件修改 #

• 你已经导入了v6提供的useParams钩子，在此基础上新增导入useNavigate：

import { Link, useParams, useNavigate } from "react-router-dom";

• 替换路由参数读取逻辑：将const productId = props.match.params.id;修改为：

const { id: productId } = useParams();

• 替换跳转逻辑：将props.history.push(/cart/${productId}?qty=${qty})修改为navigate(/cart/${productId}?qty=${qty})

如果你的路由配置还是v5的写法，需要同步修改为v6的规范：

• 原v5写法：<Route path="/product/:id" component={ProductScreen} />
• 修改为v6写法：<Route path="/product/:id" element={<ProductScreen />} />

修改完成后重启项目即可解决当前报错。

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