1

在我的应用程序中，有一个主页被加载，还有另一个页面（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);

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

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

4

0 回答 0