Going back from a redirect tag - React Router

Question

Currently, I created a search bar and I have my search bar linked to my search results like this:

render() {
if (this.props.itemsFetchSuccess) {
  return (
    <Redirect to={{
      pathname: '/search',
      search: `?item-name=${this.props.searchQuery}`
    }} />
  );

as part of the render component of my search bar.

GOOGLE CHROME MAIN -> MAIN LANDING -> SEARCH RESULTS.

But I'm suspecting that because I used a redirect tag in React-Router v4, it's not adding it to the browser history stack. If I press back on a browser from the search results page, it won't go back to the page before (i.e. the main landing) but it'll go back to the page before the main landing.

Is there a better way of doing this as I tried using a Link tag as well but that doesn't work since it just generates the link and doesn't actually redirect once the search results are completed.

Thank you!

Answer 1

In your case you can use Redirect with push argument. When press back button it will redirect to previous page correctly.

*push: bool

When true, redirecting will push a new entry onto the history instead of replacing the current one.

<Redirect push to={{
    pathname: '/search',
    search: `?item-name=${this.props.searchQuery}`
}} />