Menu
I'm using react-router-dom and what I want is to be able to close a Modal when I click browser back button.
Also, in my scenario, the modal component is not the part of Switch. So how can I close the modal.
Thanks in advance. :)
248
To achieve this, we'll do the following: Create a top-level <Route> in <BrowserRouter> that matches all URLs ( / ) and render App component. Get history object by wrapping App component with withRouter higher-order component. Listen to window object's popstate event and go forward if the user navigates backward.
To close the modal, simply call the handleClose() function inside the onLoginFormSubmit() function body.
To go back to the previous page with React router: Use the useNavigate() hook, e.g. const navigate = useNavigate(); . Call the navigate() function passing it -1 - navigate(-1) . Calling navigate with -1 is the same as hitting the back button.
React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.
You could probably use something like this to detect the press of the Back button.
componentDidUpdate() {
window.onpopstate = e => {
}
}
And then, depending on your modal (Bootstrap or something else) you can call .hide() or .close().
152
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
