Unable to use usehistory in class component, example of withrouter

I have below code:-

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

class clusterServersDropdown extends Component {
  constructor() {
    super();
    this.state = {
      clusterslist: [],
      servertype: [],
      selectserver: "",
      selectcluster: ""
    };
  }
  componentDidMount() {
    this.setState({
      clusterslist: [
        { label: "cluster1", servertype: ["test1", "test2", "test3"] },
        { label: "cluster2", servertype: ["test1", "test2", "test3"] }
      ]
    });
  }
  selectclusterChange(e) {
    this.setState({ selectcluster: e.target.value });
    this.setState({
      servertype: this.state.clusterslist.find(
        (x) => x.label === e.target.value
      ).servertype
    });
  }

  routeChange = (e) => {
        this.setState({ selectserver: e.target.value}, () => {
        console.log(this.state.selectserver);
        let path = "http://localhost:3000/inventory/cluster/" + this.state.selectcluster +"/servertype/" + this.state.selectserver;
        console.log(path);
        withRouter(path);
      });
  };

  render() {
    return (
      <div>
        <center>
          <h1>
            Implement cascading Dropdown list
            <h2>
              ReactJS tutorials
              <hr />
              <select
                value={this.state.selectcluster}
                onChange={this.selectclusterChange.bind(this)}
              >
                <option>-- Select --</option>
                {this.state.clusterslist.map((x) => {
                  return <option>{x.label}</option>;
                })}
              </select>
              <select
                value={this.state.selectserver}
                onChange={this.routeChange}
              >
                <option>--------selection disabled------</option>
                {this.state.servertype.map((x) => {
                  return <option>{x}</option>;
                })}
              </select>
            </h2>
          </h1>
        </center>
      </div>
    );
  }
}

export default clusterServersDropdown;

Based on the output that I get i was trying to redirect to another link after creating the link here. When i do console.log my link gets printed as http://localhost:3000/inventory/cluster/cluster1/servertype/test1 to which I need to redirect. I have used usehistory in past but as its a hook, i am unable to use it here. Any ideas how can i use withrouter here?

Solution 1:

withRouter is a Higher Order Component, import it and decorate the ClusterServersDropdown component.

import { withRouter } from "react-router-dom";

class ClusterServersDropdown extends Component {
  ...
}

export default withRouter(ClusterServersDropdown);

This injects route props (history, location, match) into your class component. Access the history object from props.

routeChange = (e) => {
  this.setState({ selectserver: e.target.value}, () => {
    console.log(this.state.selectserver);
    let path = "http://localhost:3000/inventory/cluster/" + this.state.selectcluster +"/servertype/" + this.state.selectserver;
    console.log(path);
    this.props.history.push(path);
  });
};

Solution 2:

You can use hooks only in function components. This is class component so you will need to use withRouter function when exporting clusterServersDropdown

export default withRouter(clusterServersDropdown);

and then you can use history object with

this.props.history