React Router Рендеринг, когда go возвращается без использования приращения

Question

Я не хочу повторно визуализировать компонент, если клиент возвращается и возвращается из браузера или нажимает кнопку возврата из веб-приложения. Пожалуйста, помогите мне с этим. Я застрял, Вы можете просмотреть функциональность по ссылке

Также, если изменить местоположение раскладки с помощью печатающей головки, она не может измениться в местах размещения, так как раскладка не изменила значение по умолчанию.

Answer 1

Я сделал show hide div над компонентом в функциях рендеринга, как показано ниже

 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;