React类组件替代useParams方案及react-router-dom v4升级v6

针对你要把React Router v4代码升级到v6的需求，下面是具体的修正方案，先指出原代码里的几个问题，再给出完整的修复代码：

原代码存在的问题 #

• 高阶组件withHook里硬编码了<Room>，应该复用传入的Component参数，让这个高阶组件具备通用性
• getRoomDetails方法里错误使用了this.roomCode，正确的应该是从props里取this.props.roomCode
• 组件state里没定义roomCode，但render里却访问this.state.roomCode，应该直接用props传入的roomCode
• 没有在组件挂载时调用getRoomDetails方法，导致无法自动获取房间数据

方案一：改进高阶组件（适配类组件） #

保留类组件的写法，修正高阶组件和Room组件的错误：

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

// 通用的高阶组件，传递路由参数给类组件
function withParams(Component) { 
  return function WrappedComponent(props) {
    const params = useParams();
    // 这里假设路由定义的是 :roomCode，比如 path="/room/:roomCode"
    return <Component {...props} roomCode={params.roomCode} />;
  };
}

class Room extends Component {
  constructor(props) {
    super(props);
    this.state = {
      votesToSkip: 2,
      guestsCanPause: false,
      isHost: false,
    };
    // 绑定this，避免方法调用时this指向错误
    this.getRoomDetails = this.getRoomDetails.bind(this);
  }

  componentDidMount() {
    // 组件挂载时获取房间详情
    this.getRoomDetails();
  }

  getRoomDetails() {
    // 从props中获取roomCode
    const { roomCode } = this.props;
    fetch(`/api/get-room?code=${roomCode}`)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          votesToSkip: data.votes_to_skip,
          guestsCanPause: data.guest_can_pause, // 修正state字段拼写一致
          isHost: data.is_host,
        });
      })
      .catch(err => console.error('获取房间数据失败:', err)); // 增加错误处理
  }

  render() {
    const { roomCode } = this.props;
    const { votesToSkip, guestsCanPause, isHost } = this.state;
    return (
      <div>
        <h3>{roomCode}</h3>
        <p>Votes: {votesToSkip}</p>
        <p>Guests Can Pause: {guestsCanPause.toString()}</p>
        <p>Host: {isHost.toString()}</p>
      </div>
    );
  }
}

export default withParams(Room);

方案二：转换成函数组件（更推荐React Router v6风格） #

React Router v6更推崇函数组件+hooks的写法，直接使用useParams和useEffect，代码更简洁直观：

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

function Room() {
  const { roomCode } = useParams();
  const [votesToSkip, setVotesToSkip] = useState(2);
  const [guestsCanPause, setGuestsCanPause] = useState(false);
  const [isHost, setIsHost] = useState(false);

  useEffect(() => {
    const getRoomDetails = async () => {
      try {
        const response = await fetch(`/api/get-room?code=${roomCode}`);
        const data = await response.json();
        setVotesToSkip(data.votes_to_skip);
        setGuestsCanPause(data.guest_can_pause);
        setIsHost(data.is_host);
      } catch (err) {
        console.error('获取房间数据失败:', err);
      }
    };

    getRoomDetails();
  }, [roomCode]); // 依赖roomCode，参数变化时重新请求数据

  return (
    <div>
      <h3>{roomCode}</h3>
      <p>Votes: {votesToSkip}</p>
      <p>Guests Can Pause: {guestsCanPause.toString()}</p>
      <p>Host: {isHost.toString()}</p>
    </div>
  );
}

export default Room;

注意事项 #

• 确保你的路由定义里使用的参数名是roomCode，比如在Routes里配置：<Route path="/room/:roomCode" element={<Room />} />，如果参数名是id，就把params.roomCode改成params.id
• 函数组件方案里使用了async/await简化异步代码，同时增加了错误处理，避免请求失败时出现未捕获异常

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