React使用react-router-dom返回上一页面时如何避免页面重新加载？

问题根因 #

默认react-router的Route组件使用component属性传入组件时，每次路由匹配到对应路径都会执行「卸载旧组件→挂载新组件」的逻辑，所以每次回到ListingPage都会触发componentDidMount生命周期，重新拉取表格数据。 #

方案1：外部状态缓存（最通用，适合复杂场景） #

把ListingPage的表格数据、筛选条件、分页参数等状态存到组件外部，可选实现方式包括：

• 用React Context API做全局状态管理
• 用Redux、Mobx等状态管理库
• 用sessionStorage/localStorage做轻量持久化缓存
  ListingPage挂载时先判断是否有已缓存的有效数据，有就直接渲染，没有再调用getAllRecords拉取数据，需要刷新数据时主动清空缓存即可。
  示例实现（用sessionStorage简化实现）：

// ListingPage.js 调整逻辑
componentDidMount(){
    const cachedList = sessionStorage.getItem('listingPageData')
    if(cachedList){
        // 直接用缓存数据赋值给state
        this.setState({ tableData: JSON.parse(cachedList) })
    } else {
        this.getAllRecords()
    }
}
getAllRecords = async () => {
    const res = await 实际接口请求()
    // 请求到数据后写入缓存
    sessionStorage.setItem('listingPageData', JSON.stringify(res.data))
    this.setState({ tableData: res.data })
}
// 如有主动刷新按钮，调用请求前先清空缓存
handleRefresh = () => {
    sessionStorage.removeItem('listingPageData')
    this.getAllRecords()
}

方案2：路由组件不卸载仅隐藏（实现最简单，适合少量页面缓存） #

修改App.js的路由渲染逻辑，不用Switch的独占匹配，路由不匹配时给组件加display: none隐藏而非卸载，切换回来时直接显示原有状态，完全不会触发重新挂载：

// App.js 调整路由逻辑
import { BrowserRouter, Route } from 'react-router-dom';
import HomePage from './Pages/HomePage.js'
import ListingPage from './Pages/ListingPage.js'
import DetailPage from './Pages/DetailPage.js'
function App() {
  return (
    <BrowserRouter>
      <Route path="/home" component={HomePage} />
      {/* 匹配/list路径时显示，否则隐藏，不卸载组件 */}
      <Route path="/list" children={({ match }) => (
        <div style={{display: match ? 'block' : 'none'}}>
          <ListingPage />
        </div>
      )}/>
      <Route path="/detail" component={DetailPage} />
    </BrowserRouter>
  )
}

方案3：路由状态判断，按需触发请求 #

跳转到详情页时携带路由状态标记，回到列表页时判断是否是从详情页返回的，是就不重新拉取数据：

// ListingPage.js 调整逻辑
goToDetailRecord = () => {
    // 跳转时携带来源标记
    this.props.history.push('detail', { fromListPage: true })
}
componentDidMount(){
    const routeState = this.props.location.state
    // 只有不是从详情页返回的时候才触发数据请求
    if(!routeState?.fromListPage){
        this.getAllRecords()
    } else {
        // 清除标记，避免下次从其他页面进入列表时也不刷新
        this.props.history.replace({ state: {} })
    }
}

内容的提问来源于stack exchange，提问作者Kirankumar Dafda