Question

在我的应用程序中，有一个主主页已加载，还有另一个页面（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，然后返回首页，所有组件均按原样呈现，除非手动刷新

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

导航页面时如何不重新渲染组件？

0 个答案: