为什么不读取参数？

Question

我正在尝试阅读代码，但它返回未定义。我想从路由中读取代码并显示在h3标签中。

路由

 <Router>
  <Routes>
    <Route path="/" element={<p>Homepage</p>} />
    <Route path="/join" element={JoinRoomPage()} />
    <Route path="/create" element={CreateRoomPage()} />
    This is the roomCode i want to read in the Room Component
    <Route path="/room/:roomCode" element={Room()} />
  </Routes>
</Router>

房间组件

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

export default function Room(props) {
  const [room, setRoom] = useState({
    votesToSkip: 2,
    guestCanPause: true,
    isHost: false,
  });

  let { roomCode } = useParams();

  return (
    <div>
      <h3>{roomCode}</h3>
      <p>Votes: {room.votesToSkip}</p>
      <p>Guest Can Pause: {room.guestCanPause}</p>
      <p>Host: {room.isHost}</p>
    </div>
  );
}

提前致谢

Answer 1

路由组件应作为 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>

Answer 2

路由器

<Router>
  <Routes>
    <Route path="/" element={<p>Homepage</p>} />
    <Route path="/join" element={JoinRoomPage()} />
    <Route path="/create" element={CreateRoomPage()} />
    This is the roomCode i want to read in the Room Component
    <Route path="/room/:roomCode" element={<Room />} />
  </Routes>
</Router>

房间组件

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

const Room = (props) => {
    let { roomCode } = useParams();
    const [room, setRoom] = useState({
        votesToSkip: 2,
        guestCanPause: true,
        isHost: false,
    });

    return (

        <div>
            <h3>{roomCode}</h3>
            <p>Votes: {room.votesToSkip}</p>
            <p>Guest Can Pause: {room.guestCanPause}</p>
            <p>Host: {room.isHost}</p>
        </div>
    );
}

export default Room;

为什么不读取参数？

Why is it not reading the params?

javascript

components

reactjs

react-router

react-router-dom