reactjs - 在 React 应用程序上查询 API 并重定向到搜索栏（组件）的结果页面

Question

所以我在尝试构建我的搜索组件以通过 Axios 从我的 API 请求中查询数据时遇到了困难。现在它只是填充一个警告框。

它应该做一些事情，将查询中的数据与 API 中的数据进行比较，将匹配的数据作为 props 传递到结果页面并重定向到该结果页面以显示这些结果。该应用程序部署在这里https://suite-search-lk.surge.sh

我该怎么办？感谢任何帮助：D

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert("The following value was submitted: " + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <SearchDiv>
        <form onSubmit={this.handleSubmit} className="searchBoxWrapper">
          <div>
            <input
              className="searchQuery"
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
              placeholder="Teacher"
            />
          </div>
          <div className="submitWrapper">
            <input className="submitBtn" type="submit" value="Search" />
          </div>
        </form>
      </SearchDiv>
    );
  }
}