useParams() 在 react-router-dom v6.8 中是一个空对象

Question

我只是想在 React 中使用 react-router-dom v 6.8 从动态路由 ("/articles/:articleId") 检索参数

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

我试图关注the Docs，但我一定在这里遗漏了一些东西。

应用程序.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>
  );
}

文章.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

输出

Answer 1

几个问题：

1. 您直接调用 React 函数而不是将它们渲染为 JSX。这些组件不会作为正常 React 组件生命周期的一部分被调用，因此不会填充参数。
2. react-router-dom@6 完全用 Typescript 编写，因此不需要任何外部类型，尤其是来自 react-router-dom@5 的类型，这对于 RRDv6 来说是非常不正确的。

   Route 组件的 element 属性采用 React.ReactNode，又名 JSX，值。

   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>
     );
   }
   

   卸载不必要的依赖。

   npm uninstall --save @types/react-router-dom