javascript - react 路由器 : How to re-render the page when the user presses the back button

Question

我希望有一个简单的答案。我尝试了不同的方法并进行了全面搜索，但仍然无法解决问题。

所以!使用 React-Router-Dom，我有一个带有 Logo 的父组件，该 Logo 位于固定位置并在所有子组件/页面上可见。

class Parent extends React.Component {
  render() {
    return (
       <div>
        {window.location.pathname==='/contact' ? 
         null :
         <div className='originalLogo'></div>
        }
       </div>

) }

但在联系页面上， Logo 被修改后的版本替换，并且原始设置为空。

class Child extends React.Component {
   render() {
     return (
      <div className='modifiedLogo'></div>
  )

}

当用户通过菜单手动单击联系人页面时，我能够捕获此更改。但这就是问题开始的地方。如果用户打开菜单栏并单击主页，则 Logo 会变回其原始版本。但是，如果用户从联系页面在浏览器上单击“返回”，则 Logo 将保留为修改后的版本，而不是原始版本。直到用户在首页点击菜单，会因为状态改变(菜单显示)导致页面重新渲染，然后logo又变回原来的样子。

所以我的问题是，当用户单击浏览器上的“返回”按钮时，我该如何重新呈现页面？

Answer 1

您可以使用Switch 和Route 组件来呈现页面，还可以呈现页面部分。这应该有助于解决问题。

import { Switch, Route } from 'react-router-dom';

class Parent extends React.Component {
    render() {
        return (
            <Switch>
                <Route path="/contact" render={() => null} />
                <Route render={() => <div className='originalLogo' />} />
            </Switch>
        );
    }
}