如何在useEffect中使用useParams()

Question

我想根据 URL 参数在组件安装上加载不同的组件，但由于某种原因，我的

useParams()

对象

room

在我的

useEffect()

中显示为未定义。

// App.js
function App() {
  const { room } = useParams();
  const [inGame, setInGame] = useState(false);

  useEffect(() => {
    console.log(room); // undefined

    socket.emit("am_i_in_game", room, (res) => {
      setInGame(res.inGame);
      return;
    });

    return;
  }, [room]);

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

Answer 1

App

组件无法从自身下方渲染的路由中读取路由路径参数。

我建议创建一个在

Room

上渲染的

path="/:room"

组件，并且可以读取

room

路由路径参数并发出副作用并渲染适当的内容。基本上将

App

中的状态和逻辑移到 ReactTree 下。

示例：

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

  useEffect(() => {
    console.log(room);

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

  return inGame
    ? <GameScreen {...gameScreenProps} />
    : (
      <StartScreen
        {...startScreenProps}
        hasJoinEmbed={room?.length === 6}
      />
    );
};

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