不使用redux返回时React Router重新渲染答案

【问题标题】：React Router Re-render when go back not using redux不使用redux返回时React Router重新渲染
【发布时间】：2020-05-29 23:20:51
【问题描述】：

如果客户从浏览器返回或按 Web 应用程序的返回按钮，我不想重新渲染组件。请帮我解决一下这个。我卡住了，你可以从link查看功能

另外，如果用字头改变拾取位置，它不能改变放置位置，因为字头没有改变默认值。

【问题讨论】：

您可以从链接查看功能 我点击了链接，如何查看功能？
编辑您的问题并添加更多详细信息和更多解释，否则该问题将作为低质量问题关闭。
给我时间，我会更新网站上的功能。只有当客户点击价格按钮并进入下一个屏幕，然后从下一个屏幕返回时，它才会重新渲染所有组件。
从“react”导入反应；从“react-router-dom”导入 { BrowserRouter as Router, Route, Switch }；从“./App”导入应用程序；从“./components/book/book”导入图书；从“历史”导入 { createBrowserHistory as createHistory }；常量 customHistory = createHistory(); const CustomeRouter = props => ( {console.log(props)} );导出默认的CustomeRouter；
当您单击后退按钮时，会出现一些组件，它会重新挂载。而且，如果您不希望它发生，请使用对话框，因为它不会在后台卸载屏幕。

标签： reactjs typehead

【解决方案1】：

我是通过在如下渲染函数中的组件上方显示隐藏 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;

【讨论】：