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

@brijeshb42 brijeshb42 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
Copy link

@vojtatranta vojtatranta 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

Loading

@brijeshb42
Copy link
Author

@brijeshb42 brijeshb42 commented Sep 28, 2015

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

Loading

@vojtatranta
Copy link

@vojtatranta vojtatranta 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

Loading

@knowbody
Copy link
Contributor

@knowbody knowbody commented Sep 28, 2015

thanks @vojtatranta

Loading

@knowbody knowbody closed this Sep 28, 2015
@vojtatranta
Copy link

@vojtatranta vojtatranta 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 :))

Loading

@knowbody
Copy link
Contributor

@knowbody knowbody commented Sep 28, 2015

seems legit 👍

@mjackson will comment if he sees better solution :)

Loading

@brijeshb42
Copy link
Author

@brijeshb42 brijeshb42 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();
    }
  }
}

Loading

@endel
Copy link

@endel endel 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

Loading

@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.
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants