React Router：用户按下后退按钮时如何重新呈现页面

Question

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

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

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

）}}

但是在“联系人”页面上，徽标被修改后的版本代替，并且原始徽标设置为null。

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

}}

当用户通过菜单手动单击联系人页面时，我可以捕获此更改。但是，这里是问题开始的地方。如果用户打开菜单栏并单击主页，则徽标将变回其原始版本。但是，如果用户从联系人页面单击浏览器上的“返回”，徽标将保留为修改版本，而不是原始版本。直到用户单击主页上的菜单为止，由于状态更改（菜单显示的状态），将导致页面重新呈现，然后徽标将恢复为原始形式。

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

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'></div>)} />
            </Switch>
        );
    }
}