Unable to use usehistory in class component, example of withrouter - reactjs

Question

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?

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

Answer 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