useParams returns undefined after destructurization-CodePudding

I am having an undefined variables returned, even after destructurization, while using useParams(). I got every other solution done but nothing works for me.

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

And that's my PageRender function. Destructured variables are the same as in path

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

  let name = '';

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

  return generatePage(name)
}

After many solutions tried, it's still returning undefined

CodePudding user response：

#useParams only working within an react function. In your example you're calling the function instead of passing it in.

Try this instead:

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

You didn't share the code of #generatePage, but I'm assuming it returns some reactnode/element.