history.push using react-router-dom

Ravi K

I am navigating from one page to another using history.push which is available from below

import { withRouter } from 'react-router-dom

I am able to navigate properly but i have a requirement that if i move from Page A to Page B, i should not be allowed to go back to previous page using Browser back button.

I know this can be achieved by window.redirect but i dont want to use that. The problem with that is the entire state and redux store information is lost. Does anyone know if i can use withRouter and still be able to achieve the requirement above.

Sohail Ashraf

You could use the history.replace('/Whatever_screen') to replace the current page in the stack.

replace(path, [state]) - (function) Replaces the current entry on the history stack.

Second option:

You could use the below code to block the user to going back in the history.

 componentDidMount() {
    const { history } = this.props;
    window.onpopstate = function (event) {
      history.go(1);
    };
  }

Working Example:

Edit react-disable-back-button-v1 (forked)

MDN reference here:

There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React Router Dom History

react-router-dom - Difference between link and history.push?

Is possible to override History.push method of React-Router-Dom

history.push() and Custom URL parameters using react-router

Problems that need to be refreshed when using history.push() in react router

using history with react-router dom on v6

React-router-dom push

React router dom v5 history.push does not render new page

react-router-dom v6 history push and useNavigate problem

React router push to history and preserve relative path

React Router BrowserRouter History Push & Google Analytics

Onsubmit and history push is not working react router

React router history.push() not working from history.listen()

React router `this.props.history.push` - history not defined

How to test React-Router navigation through call to history.push using Jest?

In React Router, how do you pass route parameters when using browser history push?

open window using react-router v4's this.props.history.push?

How to mock history.push with the new React Router Hooks using Jest

flow - What kind can I use for the history.push of the react router using Flow for typing?

Problem when passing props using history.push() in react-router

React-Router v5 not redirecting if accessing specific route using history.push

Why `Failed to execute 'pushState' on 'History'` when using `Link` from react-router-dom?

how to get match, location, history props in react router DOM 5 using component class?

how to redirect to partical page using history object in react-router-dom v6

React router, codes after history.push run?

How to push to History in React Router v4?

react router is only replacing the final route on history.push

React router this.props.history.push , pushing the location but not rendering the component

React router history.push falls back to 404 route