React JS-使用后退按钮获取以前的搜索

Question

因此，我编写了一个小页面的应用程序，该应用程序查询API并返回一堆结果，并在用户输入搜索字词的输入字段下方显示给用户。

每次输入新的搜索词并按Enter时，都会重新查询API，并使用新结果更新页面。

但是，我希望能够在浏览器中单击“后退”按钮，然后再浏览以前的搜索结果。我该怎么做？

Answer 1

您可以为此使用React Routerhistory ，并将其设置为每次提交搜索表单时都会向对象推送一个新条目。然后，您可以componentDidUpdate在 URL 参数更改时使用挂钩调用您的 API。

例子

import createHistory from "history/createBrowserHistory";

const history = createHistory();

class Page extends React.Component {
  state = {
    value: "",
    query: "",
    data: ["foo", "bar", "test"],
    filteredData: []
  };

  componentDidMount() {
    this.setQuery();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.query !== this.props.match.params.query) {
      this.setQuery();
    }
  }

  setQuery = () => {
    const { query = "" } = this.props.match.params;
    const filteredData = this.state.data.filter(element =>
      element.toLowerCase().includes(query.toLowerCase())
    );
    this.setState({ value: query, query, filteredData });
  };

  onChange = event => {
    this.setState({ value: event.target.value });
  };

  onSubmit = event => {
    event.preventDefault();
    history.push(`/${this.state.value}`);
  };

  render() {
    const { value, filteredData } = this.state;

    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input value={value} onChange={this.onChange} />
          <input type="submit" value="Search" />
          {filteredData.map(element => <div key={element}> {element} </div>)}
        </form>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route path="/:query?" component={Page} />
        </Switch>
      </Router>
    );
  }
}