解构后 useParams 返回 undefined

Question

即使在解构之后，使用 useParams() 时，我也会返回一个未定义的变量。 我完成了所有其他解决方案，但对我没有任何作用。

const App = () => {
  return (
    <div className="container">
      <Router>
        <Routes>
          <Route path="/" element={PageRender()}/>
          <Route path="/:page" element={PageRender()} />
          <Route path="/:page/:slug" element={PageRender()} />
        </Routes>
      </Router>
    </div>
  )
}

这就是我的 PageRender 函数。解构变量与路径中的相同

const PageRender = () => {
  const { page, slug } =  useParams();
  console.log(page)

  let name = '';

  if(page){
    name = slug ? `${page}/[slug]` : `${page}`
  }
  console.log(name)

  return generatePage(name)
}

在尝试了许多解决方案后，它仍然返回 undefined

Answer 1

#useParams 仅在反应函数中工作。在您的示例中，您正在调用该函数而不是将其传入。

试试这个：

<Route path="/" element={<PageRender />}/>

您没有共享#generatePage 的代码，但我假设它返回一些反应节点/元素。

Answer 2

你能向我解释一下这段代码是如何工作的吗？我不知道 Pagerender