使用useParams解构后变量返回undefined的问题求助

核心问题出在Route组件的element属性使用方式错误：你直接调用了PageRender()函数，而非传递组件本身。这种写法会让PageRender脱离路由上下文执行，导致useParams()无法读取到路由参数，所以page始终返回undefined。

修正方法 #

将Route的element值从函数调用改为组件标签形式：

修正后的App组件代码 #

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

修改后，PageRender会在路由上下文内被渲染，useParams()就能正确获取到page和slug参数了。

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