Preventing navigation under some circumstances

[bwqr]

Hi there,

I was developing a web application with yew, yew-router and yewdux. At some point in the application, I want to prevent user navigating from the current page to another page in order to let them know that there are some unsaved states. I investigated the docs and found add_navigation_listener. However, as far as I have understood, this does not let us prevent the navigation. Is there a method to prevent navigation with current yew-router? If no, do you believe that the functionality is useful to implement?

Thanks

[ranile]

There is no good way to handle this at router level. In most cases, you want to use async operations in the method that checks for access. What should be displayed while the loading happens? A loading page? A progress bar? Yew should not be making that decision.

You could wrap your page in another component that checks for access and redirects if not allowed.

fn MyProtectedPage() -> HtmlResult {
    let allowed = use_future(async { /* check for access */ })?

   if allowed { html! <MyPage /> } else { <Redirect to="somewhere else" /> }
}

[bwqr]

Thank you for your answer. I guess I could not express what I wanted. My intention was to prevent user navigating away from the current page instead of preventing navigating into some page. This feature would allow us to warn user about unsaved changes in the current page.

For example, let's assume that we have a profile page where user updates his/her bio. In the middle of edit, user accidentally clicked one of the link or some other event is happened to cause navigating away from the current page. If we had the ability of interrupting the navigation and checking if there are some unsaved changes, we could have asked the user something like There are unsaved changes, are sure about leaving the page?. Here is a basic codeblock:

fn UserProfile() -> Html {
    let unsaved_changes = use_state(|| false);
    let update_unsaved_changes = {
        let unc = unsaved_changes.clone();
        Callback::from(|_| unc.set(true));
    };
    use_navigator().unwrap().on_navigation(|nav_event| if unsaved_changes { nav_event.prevent() });
    html! { <textarea oninput={update_unsaved_changes}></textarea>}
}