router5
  • Read Me
  • Introduction
    • Why router5?
    • Getting Started
    • Ecosystem
    • Core concepts
    • Transition phase
  • Guides
    • Defining routes
    • Path Syntax
    • Router options
    • Navigating
    • In the browser
    • Observing state
  • Integration
    • With React
    • With Redux
  • Advanced
    • Plugins
    • Middleware
    • Preventing navigation
    • Errors and redirections
    • Dependency injection
    • Loading async data
    • Universal routing
    • Listeners plugin
  • API Reference
  • Migration
    • Migrating from 7.x to 8.x
    • Migrating from 6.x to 7.x
    • Migrating from 5.x to 6.x
    • Migrating from 4.x to 5.x
    • Migrating from 3.x to 4.x
    • Migrating from 2.x to 3.x
    • Migrating from 1.x to 2.x
    • Migrating from 0.x to 1.x
Powered by GitBook
On this page
  • Using the browser plugin
  • Plugin options
  1. Guides

In the browser

PreviousNavigatingNextObserving state

Last updated 6 years ago

The browser plugin will automatically update your browser URL and state on route changes. It will also listen to popstate events (triggered by back and forward buttons and manual URL changes).

Using the browser plugin

This plugin uses HTML5 history API and therefore is not compatible with browsers which don't support it. Refer to for browser compatibility.

It adds a bunch of functions to work with full URLs: router.buildUrl(routeName, routeParams) and router.matchUrl(url). It also decorates the start function so you don't have to supply any start path (it extracts it from the current URL).

import browserPlugin from 'router5-plugin-browser'

const router = createRouter()

router.usePlugin(
    browserPlugin({
        useHash: true
    })
)

router.start()

Plugin options

  • forceDeactivate: default to true, meaning canDeactivate handlers won't get called on popstate events. It is not recommended to set it to false.

  • useHash

  • hashPrefix

  • base: the base of your application (the part to add / preserve between your domain and your route paths).

  • preserveHash: whether to preserve the initial hash value on page load (default to true, only if useHash is false)

  • mergeState: whether to keep any value added in history state by a 3rd party or not (default to false)

caniuse.com