为什么不读取参数？答案

【问题标题】：Why is it not reading the params?为什么不读取参数？
【发布时间】：2022-01-02 05:45:09
【问题描述】：

我正在尝试阅读代码，但它返回未定义。我想从路由中读取代码并将其显示在 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>
  );
}

提前致谢

【问题讨论】：

标签： javascript reactjs react-router components react-router-dom

【解决方案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>

【讨论】：

非常感谢您的帮助。

【解决方案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;

【讨论】：