react-router-dom v6.8中useParams()返回空对象问题求助

我尝试在React中使用react-router-dom v6.8获取动态路由（"/articles/:articleId"）的参数，但useParams()始终返回空对象。

依赖版本 #

"react-router-dom": "^6.8.0",    
"@types/react-router-dom": "^5.3.3",

我已查阅官方文档，但仍未找到问题根源。

相关代码 #

App.tsx

function App() {
  return (
    <Router>
      <Routes>
        <Route path={"/articles/:articleId"} element={Article()}/>
        <Route path={"/articles"} element={Articles()}/>
        <Route path={"/404"} element={NotFoundPage()}/>
        <Route path={"/"} element={HomePage()}/>
        <Route path={"*"} element={NotFoundPage()}/>
      </Routes>
    </Router>
  );
}

Article.tsx

import { useParams } from "react-router-dom";
import { useEffect } from "react";

const Article = () => {
  const { articleId } = useParams()
  const params = useParams()

  useEffect(() => {
    console.log('even inside useEffect', params);
  }, [])
    
  console.log("Article  ", useParams(), articleId)

  return (
    <div>ID: {articleId}</div>
  )
}

export default Article

输出结果 #

问题原因及解决方案 #

1. 组件调用方式错误 #

在App.tsx的Route配置中，你直接调用了组件函数Article()，而非传递组件本身：

// 错误写法
<Route path={"/articles/:articleId"} element={Article()}/>

这种写法会在组件挂载阶段立即执行函数，跳过React Router的上下文管理，导致useParams无法获取路由参数。

修正写法：

// 正确写法
<Route path={"/articles/:articleId"} element={<Article />}/>

所有Route的element属性都应传递JSX元素而非函数调用结果，比如<Articles />、<NotFoundPage />等都需要同步修改。

2. 类型依赖版本不兼容 #

你使用的@types/react-router-dom是v5.3.3，但react-router-dom本体是v6.8.0，版本不匹配可能引发类型提示异常或潜在运行问题。

修正方式：
升级类型依赖到对应v6版本：

npm install @types/react-router-dom@^6.8.0 --save-dev
# 或用yarn
yarn add @types/react-router-dom@^6.8.0 --dev

额外优化提示 #

如果需要在useEffect中监听参数变化，需将params加入依赖数组，否则回调不会随参数更新触发：

useEffect(() => {
  console.log('参数已更新', params);
}, [params])

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