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

Posted 2023-05-08

【中文标题】不使用redux返回时React Router重新渲染

【英文标题】：React Router Re-render when go back not using redux

【发布时间】：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；

当您单击后退按钮时，会出现一些组件，它会重新挂载。而且，如果您不希望它发生，请使用对话框，因为它不会在后台卸载屏幕。

【参考方案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;