React JS - using back button to get previous searches

Question

So I've written a little single page app which queries an API and returns a bunch of results which I display to the user underneath the input field where they enter their search term.

Each time I enter a new search term and press enter the API is re-queried and the page is updated with new results.

However, I'd like to be able to click the back button in my browser and go back through my previous search results. How would I do that?

Answer 1

You could use React Router for this, and set it up so that each time you submit the search form you push a new entry to the history object. You could then use the componentDidUpdate hook to call your API when the URL parameter change.

Example

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