Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to capture navigation and ask for confirmation before navigating away from a route? #2106

Closed
brijeshb42 opened this issue Sep 28, 2015 · 8 comments

Comments

@brijeshb42
Copy link

commented Sep 28, 2015

I am using react-router v0.13.3 and I tried using willTransitionFrom to capture navigation but it isn't working. I am using ES6 so I cannot use mixins.
My code:

MyComponent.willTransitionFrom = function (transition, component) {
  console.log(transition);
  console.log(component);
  if(!confirm('Are you sure you want to leave?')) {
    transition.abort();
  }
};
@vojtatranta

This comment has been minimized.

Copy link

commented Sep 28, 2015

Depends on whether you want this to be global or not.
I did it differently.
I directly listen to BrowserHistory for changes. Look at my code here https://github.com/vojtatranta/avcd-test-app/blob/master/containers/Root.js

@brijeshb42

This comment has been minimized.

Copy link
Author

commented Sep 28, 2015

I am using v0.13.3. It does not have BrowserHistory.

@vojtatranta

This comment has been minimized.

Copy link

commented Sep 28, 2015

Ahaaa,
then you can do:

//in case you want to have all this sorted on the level or react and router
Router.run(routes, function (Handler) {
  //this gets callend everytime you visit new page
  //so you can do
  if (Handler == HandlerIWantToConfirm) {
    if (!window.confirm('Realy want to quit?')) {
       React.render(<Handler/>, document.body);
    }
  } else {
    React.render(<Handler/>, document.body);
  }
})

//or onbeforeunload is always a possibility, but I am not sure, how it will work in SPA
@knowbody

This comment has been minimized.

Copy link
Contributor

commented Sep 28, 2015

thanks @vojtatranta

@knowbody knowbody closed this Sep 28, 2015

@vojtatranta

This comment has been minimized.

Copy link

commented Sep 28, 2015

@knowbody but I am not sure whether this is a legit solution, I am sure that Michael Jackson would do this differently :))

@knowbody

This comment has been minimized.

Copy link
Contributor

commented Sep 28, 2015

seems legit 👍

@mjackson will comment if he sees better solution :)

@brijeshb42

This comment has been minimized.

Copy link
Author

commented Sep 29, 2015

I found a better solution:

class MyComponent extends Component {
  static willTransitionFrom(component, transition) {
    if(!window.confirm('Are you sure you want to leave ?')) {
      transition.abort();
    }
  }
}
@endel

This comment has been minimized.

Copy link

commented Jun 26, 2017

Just stumbled upon this thread and here's a up-to-date documentation for this: https://reacttraining.com/react-router/web/example/preventing-transitions

@lock lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
4 participants
You can’t perform that action at this time.