React使用useHistory时读取location属性出现未定义报错如何解决

• 依赖版本不兼容：同时安装了v5版本的react-router和v6版本的react-router-dom，两个包的API不匹配，是触发报错的核心诱因。
• 使用了v6已废弃的API：react-router-dom v6已经完全移除了useHistory hook，调用useHistory()返回的是undefined，后续访问history.location自然会抛出读取undefined属性的错误。
• 路由配置混用v5/v6语法：代码里的<Redirect>组件、Route的render属性都是react-router v5的语法，在v6环境下无法正常生效。

步骤1：统一依赖版本 #

先卸载冲突的旧版本包，安装匹配的v6版本，v6版本的react-router-dom已经内置了对应版本的react-router，不需要单独安装：

npm uninstall react-router react-router-dom
npm install react-router-dom@6

步骤2：替换废弃API实现原有逻辑 #

v6提供了单独的useLocation、useParams hook来获取路径信息和参数，修改LinkList组件代码如下：

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

const LinkList = () => {
  const location = useLocation();
  const params = useParams();
  const isNewPage = location.pathname.includes('new');
  // 直接从params中读取page参数，不需要手动切割路径
  const page = parseInt(params.page) || 1;
  // 其余原有逻辑保持不变
}

如果有页面跳转需求，可以用useNavigate hook替代原有的history跳转功能：const navigate = useNavigate()，调用navigate('/目标路径')即可实现跳转。

步骤3：修正路由配置的废弃语法 #

把v5的Redirect、render属性替换为v6对应的语法，修改App.js路由部分代码：

import { Routes, Route, Navigate } from 'react-router-dom';

const App = () => {
  return (
    <div className="center w85">
      <Header />
      <div className="ph3 pv1 background-gray">
        <Routes>
          {/* 替换原有的Redirect写法 */}
          <Route exact path="/" element={<Navigate to="/new/1" replace />} />
          <Route exact path="/create" element={<CreateLink />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/search" element={<Search />} />
          <Route exact path="/home" element={<LinkList />} />
          <Route
            exact
            path="/new/:page"
            element={<LinkList />}
          />
        </Routes>
      </div>
    </div>
  );
};

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