How to bypass around not having to use usePararms in a class?-CodePudding

I am new to ReactJS. So I want to upgrade this piece of code from react-router-dom-v4 to react-router-dom-v6. I know that we can not use this.props.match.params.roomCode in v6 and I wanted to figure out how to upgrade this. Any help would be appreciated.

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

function withHook(Component) { 
return function WrappedComponent(props) {
  const params = useParams();
// assuming :id is what you have on the route
  return <Room {...props} roomCode={params.id} />;
};
}

class Room extends Component {
constructor(props) {
super(props);
this.state = {
  votesToSkip: 2,
  guestsCanPause: false,
  isHost: false,
};
//props.roomCode is what you want
}

getRoomDetails() {
fetch("/api/get-room"   "?code="   this.roomCode)
  .then((response) => response.json())
  .then((data) => {
    this.setState({
      votesToSkip: data.votes_to_skip,
      guestCanPause: data.guest_can_pause,
      isHost: data.is_host,
      });
    });
   }

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

 export default withHook(Room);

CodePudding user response：

Hooks are not supported for class components

You can’t use Hooks inside of a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.

https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

If you still do not want to transform your class component to a functional one, add roomCode as a prop to your component and use an HOC to do the heavy lifting. Something like this

function withHook(Component) {
  return function WrappedComponent(props) {
    const params = useParams();
    // assuming :id is what you have on the route
    return <Room {...props} roomCode={params.id} />;
  }
}

class Room extends Component {
  constructor(props) {
    super(props);
    this.state = {
      votesToSkip: 2,
      guestsCanPause: false,
      isHost: false,
    };
    this.roomCode = this.props.roomCode;
  }

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

export default withHook(Room)

Or migrate to a functional component.. and this all goes away.

  const Room = () => {
    const {id: roomCode} = useParams()
    const [roomState, setRoomState] = useState({
      votesToSkip: 2,
      guestsCanPause: false,
      isHost: false,
    })
    
    return (<div>Room details</div>)
  }

Hope this helps