React: How to prompt for unsaved changes when navigating with react-router-component
Redux state holds flag for unsaved changes, and I want to prompt user when navigating (clicks a Link) if this flag is set. I'm using react-router-component. I didn't find how to do this in documentation.
javascript html reactjs redux react-router-component
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
add a comment |
Redux state holds flag for unsaved changes, and I want to prompt user when navigating (clicks a Link) if this flag is set. I'm using react-router-component. I didn't find how to do this in documentation.
javascript html reactjs redux react-router-component
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
add a comment |
Redux state holds flag for unsaved changes, and I want to prompt user when navigating (clicks a Link) if this flag is set. I'm using react-router-component. I didn't find how to do this in documentation.
javascript html reactjs redux react-router-component
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
Redux state holds flag for unsaved changes, and I want to prompt user when navigating (clicks a Link) if this flag is set. I'm using react-router-component. I didn't find how to do this in documentation.
javascript html reactjs redux react-router-component
javascript html reactjs redux react-router-component
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
asked Jul 21 '16 at 10:36
Tuomas ToivonenTuomas Toivonen
4,208845100
4,208845100
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You should simply be able to create your own Link component (that inherits from Router.NavigatableMixin, example here https://github.com/STRML/react-router-component/issues/105#issuecomment-63874805 and here http://strml.viewdocs.io/react-router-component/recipes/custom-link/).
Then you just handle click event on that component by prompting user if they want to navigate away if 'yes' you just continue with this.navigate(...) (from within your component, inheriting from Navigatable).
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler?
– Tuomas Toivonen
Jul 21 '16 at 11:27
1
Hover state is probably css-only thing - check styles on Link component & compare with yours.
– WTK
Jul 21 '16 at 19:32
add a comment |
Anyone reaching this post in 2018 and using the react router 4+, I'd suggest reading this reacttraining example
TL;DR use the Prompt component at the top
<Prompt
when={hasUnsavedChanges}
message="There are unsaved changes, do you wish to discard them?"
/>
answered Jun 11 '18 at 22:37
jayjay
3,91343252
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38501943%2freact-how-to-prompt-for-unsaved-changes-when-navigating-with-react-router-compo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You should simply be able to create your own Link component (that inherits from Router.NavigatableMixin, example here https://github.com/STRML/react-router-component/issues/105#issuecomment-63874805 and here http://strml.viewdocs.io/react-router-component/recipes/custom-link/).
Then you just handle click event on that component by prompting user if they want to navigate away if 'yes' you just continue with this.navigate(...) (from within your component, inheriting from Navigatable).
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler?
– Tuomas Toivonen
Jul 21 '16 at 11:27
1
Hover state is probably css-only thing - check styles on Link component & compare with yours.
– WTK
Jul 21 '16 at 19:32
add a comment |
You should simply be able to create your own Link component (that inherits from Router.NavigatableMixin, example here https://github.com/STRML/react-router-component/issues/105#issuecomment-63874805 and here http://strml.viewdocs.io/react-router-component/recipes/custom-link/).
Then you just handle click event on that component by prompting user if they want to navigate away if 'yes' you just continue with this.navigate(...) (from within your component, inheriting from Navigatable).
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler?
– Tuomas Toivonen
Jul 21 '16 at 11:27
1
Hover state is probably css-only thing - check styles on Link component & compare with yours.
– WTK
Jul 21 '16 at 19:32
add a comment |
You should simply be able to create your own Link component (that inherits from Router.NavigatableMixin, example here https://github.com/STRML/react-router-component/issues/105#issuecomment-63874805 and here http://strml.viewdocs.io/react-router-component/recipes/custom-link/).
Then you just handle click event on that component by prompting user if they want to navigate away if 'yes' you just continue with this.navigate(...) (from within your component, inheriting from Navigatable).
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
You should simply be able to create your own Link component (that inherits from Router.NavigatableMixin, example here https://github.com/STRML/react-router-component/issues/105#issuecomment-63874805 and here http://strml.viewdocs.io/react-router-component/recipes/custom-link/).
Then you just handle click event on that component by prompting user if they want to navigate away if 'yes' you just continue with this.navigate(...) (from within your component, inheriting from Navigatable).
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
answered Jul 21 '16 at 10:46
WTKWTK
14.1k62839
14.1k62839
It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler?
– Tuomas Toivonen
Jul 21 '16 at 11:27
1
Hover state is probably css-only thing - check styles on Link component & compare with yours.
– WTK
Jul 21 '16 at 19:32
add a comment |
It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler?
– Tuomas Toivonen
Jul 21 '16 at 11:27
1
Hover state is probably css-only thing - check styles on Link component & compare with yours.
– WTK
Jul 21 '16 at 19:32
It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler?
– Tuomas Toivonen
Jul 21 '16 at 11:27
It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler?
– Tuomas Toivonen
Jul 21 '16 at 11:27
1
1
Hover state is probably css-only thing - check styles on Link component & compare with yours.
– WTK
Jul 21 '16 at 19:32
Hover state is probably css-only thing - check styles on Link component & compare with yours.
– WTK
Jul 21 '16 at 19:32
add a comment |
Anyone reaching this post in 2018 and using the react router 4+, I'd suggest reading this reacttraining example
TL;DR use the Prompt component at the top
<Prompt
when={hasUnsavedChanges}
message="There are unsaved changes, do you wish to discard them?"
/>
answered Jun 11 '18 at 22:37
jayjay
3,91343252
add a comment |
Anyone reaching this post in 2018 and using the react router 4+, I'd suggest reading this reacttraining example
TL;DR use the Prompt component at the top
<Prompt
when={hasUnsavedChanges}
message="There are unsaved changes, do you wish to discard them?"
/>
answered Jun 11 '18 at 22:37
jayjay
3,91343252
add a comment |
Anyone reaching this post in 2018 and using the react router 4+, I'd suggest reading this reacttraining example
TL;DR use the Prompt component at the top
<Prompt
when={hasUnsavedChanges}
message="There are unsaved changes, do you wish to discard them?"
/>
answered Jun 11 '18 at 22:37
jayjay
3,91343252
Anyone reaching this post in 2018 and using the react router 4+, I'd suggest reading this reacttraining example
TL;DR use the Prompt component at the top
<Prompt
when={hasUnsavedChanges}
message="There are unsaved changes, do you wish to discard them?"
/>
answered Jun 11 '18 at 22:37
jayjay
3,91343252
edited Nov 25 '18 at 22:54
answered Jun 11 '18 at 22:37
jayjay
3,91343252
answered Jun 11 '18 at 22:37
jayjay
3,91343252
answered Jun 11 '18 at 22:37
jayjay
3,91343252
3,91343252
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38501943%2freact-how-to-prompt-for-unsaved-changes-when-navigating-with-react-router-compo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
