¿Por qué no es la lectura de los parámetros?

0

Pregunta

Estoy tratando de leer el código, pero en su regreso indefinido. Quiero leer el código de la ruta y mostrar en h3 etiqueta.

El Enrutamiento

 <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>

El Cuarto Componente

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>
  );
}

Gracias de antemano

2

Mejor respuesta

0

La ruta de los componentes debe ser pasado como JSX, no como una función invocada.

<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>
2021-11-23 18:38:43

Muchas gracias por tu ayuda.
Niklas
0

Router

<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>

Sala De Componente

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;

2021-11-23 18:50:08

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................