在useEffect中使用useParams时room参数显示undefined的问题排查

你遇到的核心问题是：useParams 只能在被 <Route> 直接或间接渲染的组件中获取路由参数，而你的App组件是<Routes>的父组件，组件挂载时路由还未完成匹配，所以直接在App里调用useParams拿不到room参数，导致打印出undefined。

解决办法：拆分路由逻辑到子组件（推荐） #

把路由对应的页面逻辑拆成一个单独的子组件，在这个子组件内部使用useParams，就能正确获取到room参数，同时处理后续的socket请求和组件渲染逻辑。

步骤1：创建RoomPage子组件 #

import { useParams, useState, useEffect } from 'react';

function RoomPage() {
  const { room } = useParams();
  const [inGame, setInGame] = useState(false);

  useEffect(() => {
    // 先判断room是否存在，避免undefined时调用socket
    if (!room) return;
    
    console.log(room); // 现在能正确拿到room参数
    socket.emit("am_i_in_game", room, (res) => {
      setInGame(res.inGame);
    });
  }, [room]);

  // 根据状态渲染对应组件
  if (inGame) {
    return <GameScreen {...gameScreenProps} />;
  }
  
  return room?.length === 6 ? (
    <StartScreen {...{...startScreenProps, hasJoinEmbed: true}} />
  ) : (
    <StartScreen {...startScreenProps} />
  );
}

步骤2：修改App组件的路由配置 #

把原来的路由element替换成这个子组件，App组件只负责全局主题和路由容器：

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Routes>
        <Route path="/:room" element={<RoomPage />} />
      </Routes>
    </ThemeProvider> 
  );
}

备选方案：手动解析路由路径（不推荐） #

如果不想拆分组件，可以用useLocation获取当前路径，手动解析出room参数，但这种方式不如useParams可靠，容易因为路径结构变化出错：

import { useLocation, useState, useEffect } from 'react-router-dom';

function App() {
  const location = useLocation();
  const [room, setRoom] = useState();
  const [inGame, setInGame] = useState(false);

  // 监听路径变化，解析room参数
  useEffect(() => {
    const pathSegments = location.pathname.split('/');
    // 路径为"/:room"，所以split后索引1的位置是room参数
    const currentRoom = pathSegments[1] || undefined;
    setRoom(currentRoom);
  }, [location.pathname]);

  useEffect(() => {
    if (!room) return;
    
    console.log(room);
    socket.emit("am_i_in_game", room, (res) => {
      setInGame(res.inGame);
    });
  }, [room]);

  return (
    <ThemeProvider theme={darkTheme}>
        <Routes>
          <Route
            path="/:room" 
            element={
              inGame ? <GameScreen {...gameScreenProps} />
              : room?.length === 6 ? (
                <StartScreen {...{
                  ...startScreenProps, 
                  hasJoinEmbed: true
                }} />
              ) : <StartScreen {...startScreenProps} />
            } 
          />
        </Routes>
    </ThemeProvider> 
  );
}

额外注意点 #

• 确保你使用的是react-router-dom v6，v5版本的路由API和v6差异很大，useParams的使用规则也不同。
• 始终在使用room参数前加判断，避免undefined导致的socket请求错误或渲染异常。

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