Tengo una aplicación web con varias páginas y enrutamiento, en cada página tengo una tabla con muchos datos, por lo que cada vez que cambio de página y presiono el botón Atrás, la página del historial se recarga sola.

Quiero mantener los datos de ListingPage tal como están cuando vuelvo a ListingPage desde DetailPage. Pero cada vez que llama a la función getAllRecords y vuelve a cargar la tabla.

Intenté cambiar las opciones y los componentes de dom pero aún no obtuve una solución adecuada

La estructura de la página de mi aplicación es similar a la siguiente

Aplicación.js

 import { BrowserRouter, Route, Switch } from 'react-router-dom'; import HomePage from './Pages/HomePage.js' import ListingPage from './Pages/ListingPage.js' import DetailPage from './Pages/DetailPage.js' render() { return ( <BrowserRouter> <Switch> <Route path="/home" component={HomePage} /> <Route path="/list" component={ListingPage} /> <Route path="/detail" component={DetailPage} /> </Switch> </BrowserRouter> ) }

Página de inicio.js

 import React, { Component } from 'react'; class HomePage extends Component { render() { return ( <div> //Showing list of different table and pages </div> ); } } export default HomePage;

ListingPage.js

 import React, { Component } from 'react'; class ListingPage extends Component { componentDidMount(){ this.getAllRecords() } getAllRecords = () => {} goToDetailRecord = () => { this.props.history.push('detail') } render() { return ( <div> //Table list data </div> ); } } export default ListingPage;

DetailPage.js

 import React, { Component } from 'react'; class DetailPage extends Component { goBack = () => { this.props.history.goBack(); } render() { return ( <div> //Shows table data detail value </div> ); } } export default DetailPage;

¿Hay algo que pueda implementar para resolver el problema? Gracias por adelantado.