React中使用useParams()获取URL参数时出现‘Object(...) is not a function’错误的解决咨询

我来帮你排查这个问题，这个报错通常和React Router版本不兼容或者组件使用上下文不对有关，下面是几个常见的解决思路：

1. 检查react-router-dom版本 #

useParams是React Router v5及以上版本才引入的Hooks API，如果你的项目使用的是v4或更早的版本，就会出现这个报错——因为这个方法根本不存在。

• 先查看当前版本：

  npm list react-router-dom
  # 或者用yarn
  yarn list react-router-dom
  

• 如果版本低于v5，升级到最新稳定版：

  npm install react-router-dom@latest
  # 或者指定v5版本（如果你不想升级到v6）
  npm install react-router-dom@5.3.0
  

2. 确保组件在Router上下文内 #

useParams必须在被BrowserRouter（或HashRouter）包裹的组件树中使用，如果你的根组件没有包Router，Hooks无法获取路由上下文，也会触发类似报错。

比如在你的入口文件（比如index.js）里要这样写：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

3. 适配React Router v6的路由配置（如果是v6版本） #

如果你升级到了v6，路由配置的写法有变化：Switch被Routes取代，Route的children属性要改成element属性。

修改你的路由配置代码：

import { Routes, Route } from 'react-router-dom';
import Mypage from '../components/Mypage/Loadable'; // 注意补充分号

<Routes>
  <Route path="/ok/:id" element={<Mypage />} />
</Routes>

4. 正确使用useParams Hook #

useParams必须在函数组件的顶层作用域调用，不能在return语句、条件判断、嵌套函数里使用，否则也会触发错误。

修正你的组件代码：

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

function Mypage() {
  // 必须在组件顶层调用，不能放在return里
  const { id } = useParams();

  return (
    <p> id : {id} </p>
  );
}

export default Mypage;

最后检查一下你的导入语句，比如import Mypage from '../components/Mypage/Loadable后面少了分号，虽然这不是报错的直接原因，但也可能导致语法问题，记得补上。

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