时间戳

首页 > 解决方案 > 如何在路由更改时停止重新渲染组件（通常是返回历史记录）？

reactjs - 如何在路由更改时停止重新渲染组件（通常是返回历史记录）？

问题描述

如果我的应用程序从/profile/1to/company/1然后我回到/profile/1，则页面不应再次获取数据。

路由器配置：

<Switch>
  <Route path="/profile/:id" component={Profile}/>
  <Route path="/company/:id" component={Company}/>
</Switch>

配置文件组件

class Profile extends React.Component {

  componentDidMount() {
      this.fetchUserProfile(this.props.match.params.id);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.match.params.id !== this.props.match.params.id) {
            console.log("fetching profile again");
            this.fetchUserProfile(this.props.match.params.id);
        }
    }

    render(){
       return <Link to={"/company/1"}>company</Link>
    }

}

如何停止Profile重新获取 api？componentDidUpdate在这里没有帮助。

标签： reactjsreact-router-v5

解决方案

您可以将数据缓存在类似sessionStorageorlocalStorage中，或者您可以使用redux。

您可以在此处阅读更多信息sessionStorage：关于 sessionStorage 的 MDN Web 文档

然后在您componentDidMount的缓存中，您可以检查数据是否已经存在于缓存中，如果没有，则仅获取。

下面是一个例子，componentDidMount如果你使用，你可能会是什么样子sessionStorage：

componentDidMount() {
    let data = sessionStorage.getItem('profileData');       //Get the data from sessionStorage
    if(data) {
        this.setState({profile: data})                      // Used cached data
    }
    else {
        this.fetchUserProfile(this.props.match.params.id);  // Fetch data
    }
}

推荐阅读