React Router Re-render when go back not using redux

Question

I don't want to re-render the component if the customer goes and back from a browser or pressing back button from web app. Please help me with this. I am stuck, You can view the functionality from the link

Also if change pickup location with typehead, it cannot change in drop locations as typehead not changed the default value.

Answer 1

I did by show hide div above the component in render functions like below

 import React, { Component } from "react";
 import App from "./App";
 import Book from "./components/book/book";

class Root extends Component {
  state = { page: "searchBooking" };
  changePage = page => {
    this.setState({ page: page });
  };
  constructor(props) {
    super(props);
    let obj = this;
    window.addEventListener(
      "hashchange",
      function() {
        //console.log("The hash has changed!");
        if (window.location.hash === "#book") {
          obj.setState({ page: "book" });
        } else {
          obj.setState({ page: "search" });
        }
        return;
      },
      true
    );
  }
  render() {
    return (
      <div>
        <div
          style={{
            display:
              this.state.page === "searchBooking" ||
              this.state.page === "search"
                ? "block"
                : "none"
          }}
        >
          <App changePage={this.changePage} page={this.state.page} />
        </div>
        <div style={{ display: this.state.page === "book" ? "block" : "none" }}>
          <Book changePage={this.changePage} page={this.state.page} />
        </div>
      </div>
    );
  }
}

export default Root;