tengo estos escenarios
Página de configuración -> Página de resultados -> Página de detalles
El usuario elige la configuración, hace clic en Siguiente, obtiene resultados y luego hace clic en más detalles.
Página de detalles -> Página de resultados
El usuario vuelve a la página de resultados desde la página de detalles. Esto provoca una nueva representación completa, lo que hace que vuelva a presionar el servidor sin ningún sentido (tengo los resultados almacenados en una matriz).
Página de detalles -> Página de resultados -> Página de configuración -> Página de resultados
El usuario va a los detalles, luego vuelve a los resultados (quiere obtener los resultados almacenados), luego vuelve a la página de configuración, realiza cambios y luego vuelve a la página de resultados (ahora quiero una captura completa del servidor nuevamente).
Me pregunto si hay un enrutador de reacción para determinar si llegué a la página a través del historial del navegador o si estaba avanzando.
Estaba buscando lo mismo y finalmente encontré una solución que parece simple.
Respuesta rápida:
Uso el valor history.action para determinar si el usuario proviene de un botón Atrás o de una navegación clásica. Si history.action es igual a 'POP' entonces se ha presionado el botón Atrás. De lo contrario, es 'PUSH' .
Respuesta detallada:
Obtengo acceso al historial en accesorios de cada página porque hago algo así:
<Provider store = { store }> <AppRouter /> </Provider> Dónde está AppRouter :
import React from 'react'; import { Router, Route, Switch } from 'react-router-dom'; import createHistory from 'history/createBrowserHistory'; import PublicRoute from './PublicRoute'; import PageHome from '../pages/front/home/PageHome'; export const history = createHistory(); const AppRouter = () => ( <Router history={ history }> <div> <Switch> <PublicRoute exact = { true } path = "/" component = { PageHome } history={ history } /> < ..... Other routes here ..... > </Switch> </div> </Router> ); export default AppRouter; Y el componente PublicRoute es algo así:
import React from 'react'; import { Route } from 'react-router-dom'; import Header from '../components/header/Header'; const PublicRoute = ( { component: Component, ...rest } ) => ( <Route component={ ( props ) => ( <div> <Header /> <Component { ...props } /> </div> )} { ...rest } /> ); export default PublicRoute;En React Router, el componente permanece montado si el enrutador solicita rutas que son secundarias de ese componente. Entonces, en tu ejemplo, puedes hacer algo como lo siguiente:
<Route path="items" component={Results}> <Route path=":id" component={Detail} /> </Route> De esta forma, el componente Results no se desmonta cuando se monta el componente Detail porque Detail es un elemento secundario de Results . Sin embargo, si no desea que el componente Resultados se represente cuando está en Detalle, solo puede representar elementos secundarios cuando existan. Algo como lo siguiente:
class Results extends React.Component { render() { if (this.props.children) { // This will enter Detail component return this.props.children; } return ( // Render results component ); } }