Menu
I want to make my web app works like a mobile app. This means when a user presses back, they expect pops to close, not entire pages to change.
My end goal is to make it so when a modal opens the Back button will now close the modal and if they click it again it will go back.
I've tried several methods and although close they never respond consistently. https://codesandbox.io/s/github/subwaymatch/react-disable-back-button-example-v2
Anyone with a PROVEN working version of what I'm looking for?
693
Intercept or Handle the Browser's Back Button in React Router. We can listen to back button actions by running the setRouteLeaveHook event for back button actions. } export default withRouter(App);
Calling navigate with -1 is the same as hitting the back button. Similarly, you can call the navigate function with -2 to go 2 pages back. To programmatically navigate to a different route, pass the path to the navigate function, e.g. navigate('/about') .
Using componentDidUpdate method of React page lifecycle, you can handled or disabled go back functionality in browser. basically componentDidUpdate method will call automatocally when component got updated. so once your component is updated you can prevent to go back as below.
To intercept and handle browser’s back button in React Router, we can listen for changes in the history object with the history.listen method.
A fuller example with explanations can be found here. Version 3.x of the React Router API has a set of utilities you can use to expose a "Back" button event before the event registers with the browser's history. You must first wrap your component in the withRouter () higher-order component.
About navigating them to the home page, in react-router-dom v6 you can do that using the useNavigate hook. import { useNavigate } from 'react-router-dom' const myComponent = () => { const navigate = useNavigate () return ( <button onClick= { () => navigate ('/')}>Back to Home Page</button> ) }
In this way, the user will press the back button that we defined to go back and our goBack function will work and go to the previous page.You can use one of the following for this: 2- The second method is to control the browser’s back button and send it to the page you want.
Actually, I believe the back functionality is useful for user experience but for modal open/close you are right. the browsers back button should close the modal in both desktops and mobile devices. I offer you to write two helper functions, one for neutralize the browser back button then run your own functionality and one for revival the browser back button. use neutralizeBack function when a modal is opened and use revivalBack function when that opened modal is closed. using the second comes back to my attitude of user experience of a browser back button functionality.
The neutralizeBack should run a callback function. this callback function is what you want to do:
const neutralizeBack = (callback) => {
window.history.pushState(null, "", window.location.href);
window.onpopstate = () => {
window.history.pushState(null, "", window.location.href);
callback();
};
};
The revivalBack should run when you wanna revival the browser back button functionality:
const revivalBack = () => {
window.onpopstate = undefined;
window.history.back();
};
An example of usage:
handleOpenModal = () =>
this.setState(
{ modalOpen: true },
() => neutralizeBack(this.handleCloseModal)
);
handleCloseModal = () =>
this.setState(
{ modalOpen: false },
revivalBack
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
