React Router：当用户按下后退按钮时如何重新渲染页面

Question

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

所以！ 使用 React-Router-Dom，我有一个带有徽标的父组件，该徽标位于固定位置并在所有子组件/页面上都可以看到。

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

) } }

但是在Contact页面上，logo被修改后的版本替换了，原来的设置为null。

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

} }

当用户通过菜单手动点击联系页面时，我能够捕捉到这种变化。但这里是问题开始的地方。如果用户打开菜单栏并单击主页，则徽标会变回其原始版本。但是，如果用户从联系页面单击浏览器上的“返回”，则徽标将保留为修改版本而不是原始版本。直到用户在首页点击菜单，由于（菜单显示的）状态改变，导致页面重新渲染，然后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>
        );
    }
}