Tengo un componente, que es A y, si se completa correctamente algún formulario, dirijo al usuario al componente B. Ahora, cuando el usuario hace clic en el botón Atrás del navegador, en lugar de volver al componente A, lo dirijo a la página de inicio

Aplicación.js

 <Route exact path="/"> <Root /> </Route> <Route path="/home"> <Home /> </Route> <Route path="/a"> <A /> </Route> <Route path="/b"> <B /> </Route>

A.js

 componentDidMount() { console.log("api call"); } handleSubmit = () => { // api success this.props.history.push({ pathname: "/b", search: "?viewType=success" }); };

B.js

 backListener() { if (this.props.history.action === "POP") { let viewType = new URLSearchParams(this.props.location?.search)?.get( "viewType" ); if (viewType === "success") { return this.props.history.replace("/home"); } return this.props.history.replace("/"); } } componentDidMount() { window.addEventListener("popstate", this.backListener); } componentWillUnmount() { this.backListener(); window.removeEventListener("popstate", this.backListener); }

Aunque estoy presionando la ruta a /home, pero puedo ver el registro A.js de llamadas api

No quiero representar el A.js de B cuando se hace clic en el botón Atrás del navegador.

Qué estoy haciendo mal aquí

Salvadera

Pasos:

1. Haga clic en Ir a A
2. Haga clic en Enviar
3. Haga clic en el botón Atrás de la caja de arena
4. En la consola muestra una llamada api (2 veces)

¿Cómo podría anular la carga del componente del botón Atrás cuando estoy presionando el estado en componentWillUnmount?