无法在 class 组件中使用 usehistory，withrouter 示例

Question

我有以下代码：-

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;

根据我得到的输出，我在此处创建 link 后尝试重定向到另一个 link。当我执行 console.log 时，我的 link 被打印为 http://localhost:3000/inventory/cluster/cluster1/servertype/test1，我需要重定向到它。我过去使用过 usehistory 但作为一个钩子，我无法在这里使用它。有什么想法可以在这里使用 withrouter 吗？

Answer 1

withRouter是一个高阶组件，导入它并装饰ClusterServersDropdown组件。

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

class ClusterServersDropdown extends Component {
  ...
}

export default withRouter(ClusterServersDropdown);

这会将 route props (history, location, match) 注入到您的 class 组件中。从 props.

访问 history 对象

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

只能在函数组件中使用钩子。这是 class 组件，因此导出 clusterServersDropdown

时需要使用 withRouter 函数

export default withRouter(clusterServersDropdown);

然后您可以将历史对象与

一起使用

this.props.history

无法在 class 组件中使用 usehistory，withrouter 示例

Unable to use usehistory in class component, example of withrouter

reactjs

react-router-dom