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

Question

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

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

我试着按照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

Output

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