React Router中useParams读取路由params返回undefined如何解决？

你代码的核心问题出在路由配置的element属性赋值不符合React Router v6的要求：

• 你直接调用了组件函数Room()、JoinRoomPage()等，而非传递React JSX元素
• 直接调用组件函数会导致组件脱离React Router的路由上下文执行，useParams无法读取到路由注入的参数，自然返回undefined

修改路由配置里所有element的赋值，把函数调用改为JSX元素写法即可：

<Router>
  <Routes>
    <Route path="/" element={<p>Homepage</p>} />
    <Route path="/join" element={<JoinRoomPage />} />
    <Route path="/create" element={<CreateRoomPage />} />
    <Route path="/room/:roomCode" element={<Room />} />
  </Routes>
</Router>

修改后useParams就能正常从路由上下文读取到roomCode参数，你的Room组件代码不需要做其他改动。

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