Javascript 如何使组件在导航页面时不重新呈现？

在我的应用程序中，有一个主主页可以加载，还有另一个页面（Page2.js），我可以通过我实现的导航栏导航到它。问题是，当我转到Page2.js，然后返回主页时，它将重新呈现主页上的所有组件。我想知道是否有办法检查最后的路径名，并说如果它等于某个值，那么所有的组件都应该保持不变

我曾尝试在导航栏中使用shouldComponentUpdate方法（因为我不想更改），但它有很大的缺陷，因为它不会将prevProps.location作为值读取，但未定义：

shouldComponentUpdate = (prevProps) => {
    if (this.props.location !== prevProps.location) {
      return false;
    }
  }

App.js在应用程序中保存我的路由代码：

// imports here

class App extends Component {
    render() {
        const {location} = this.props;
        return (
            <Switch >
                <DefaultLayoutRoute exact path="/">
                    <Redirect to={HomePage}/>
                </DefaultLayoutRoute>

                <Route exact path={SIGNOUT} render={() => {
                    auth0Client.signOut();
                    window.location.href = homeRedirect;
                    return null
                }}>
                </Route>

                <Route exact path={LOGIN_SUCCESS} component={Callback}/>

                <DefaultLayoutRoute exact path={HomePage} location={location.pathname} component={HomePage}
                                    pageName="Office Production"/>

                <DefaultLayoutRoute
                    exact
                    path={AGENTRANKING}
                    component={AgentRankings}
                    pageName="Agents"
                />

                <DefaultLayoutRoute exact path={SETTINGS} component={Settings}/>
            </Switch>
        );
    }
}

export default withRouter(App);

//此处导入
类应用程序扩展组件{
render（）{
const{location}=this.props；
返回(
{
auth0Client.signOut（）；
window.location.href=homeRedirect；
返回空
}}>
);
}
}
使用路由器（App）导出默认值；

预期结果：能够导航到Page2.js，然后返回主页，所有组件都呈现原样，除非我手动刷新

实际结果：我返回主页，所有组件开始重新渲染