Type Route

Type Route

  • Docs
  • GitHub
  • v0.6.0

›Guides

Introduction

  • Getting Started
  • Simple React Example

Guides

  • Code Splitting
  • Complex Route Parameters
  • Custom Link Behavior
  • Custom Query String
  • Data Fetching
  • Nested and Similar Routes
  • No Match (404)
  • Page Layout
  • Preventing Navigation
  • Programmatic Navigation
  • Redirects
  • Rendering Links
  • Route Parameters
  • Scroll Restoration
  • Server Side Rendering
  • Styling of Links for the Currently Active Route
  • Type Route without React
  • Wildcard Routes
  • Previous Release Docs
  • Guide Missing?

API Reference

    <ParameterDefinition>

    • param

    <RouteDefinition>

    • defineRoute
    • extend

    <RouteGroup>

    • createGroup
    • has

    <Route>

    • action
    • href
    • link
    • name
    • params
    • push
    • replace

    <Router>

    • createRouter
    • useRoute
    • RouteProvider
    • routes
    • session

    Types

    • Link
    • QueryStringSerializer
    • Route
    • RouterOpts
    • SessionOpts
    • ValueSerializer

    Miscellaneous

    • noMatch
    • preventDefaultLinkClickBehavior
Edit

Preventing Navigation

The block function on the session object will create a new navigation blocker. Any time the application route changes this function will be called with the an update object containing information about the update which would have happened had the navigation not been blocked. This update object has two properties:

  • route - What the next route would have been had the navigation gone through.
  • retry - A function giving you the ability to retry this navigation attempt, for instance, after the blocker is removed.

In practice, preventing navigation may look something like the this:

const unblock = session.block(update => {
  if (confirm("Are you sure?")) {
    unblock();
    update.retry();
  }
});

Navigation between routes in your application can always be blocked. Navigation away from your application, however, cannot be reliably blocked. Some examples of navigation away from your application in a web browser include:

  • closing the tab your application is running in
  • triggering an action that opens an external page
  • reloading the page your application is running in

In these instances, if a blocker is active, a generic browser dialog will appear asking the user to confirm the navigation. Ultimately, you cannot prevent a user from leaving your application if they want to leave. This will only force them to confirm that this navigation is indeed what they want to do.

← Page LayoutProgrammatic Navigation →
Type Route is a Type Hero project  ·  Copyright © 2020