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
  • Starting your router
  • Defining a default route
  • Navigating to a specific route
  • Forcing a reload
  • Replacing current state
  • Custom options
  • Navigate callback
  • Stopping your router
  1. Guides

Navigating

PreviousRouter optionsNextIn the browser

Last updated 6 years ago

After configuring your routes, you need to enable navigation by starting your router instance.

Starting your router

const myRouter = createRouter([
    { name: 'home', path: '/home' },
    { name: 'about', path: '/about' },
    { name: 'contact', path: '/contact' }
]);

myRouter.start('/home');

When using .start(), you should supply a starting path or state except if you use the browser plugin (the current URL will automatically be used).

Invoking the .start(startPathOrState[, done]) function will:

  • Attempt to navigate to startPathOrState

  • Attempt to match the current URL if no startPathOrState was provided, or navigation failed

  • Attempt to navigate to the default route if it could not match the provided start path or if startPathOrState was not provided / failed

And will:

  • Enable navigation

Providing a starting state is designed to be used for universal JavaScript applications: see .

Defining a default route

A default route can be set in createRouter options. The following example will cause your application to navigate to /about:

var myRouter = createRouter([
        { name: 'home', path: '/home' },
        { name: 'section', path: '/:section' }
    ], {
        defaultRoute: 'section'
        defaultParams: {section: 'about'}
    })
    .start(function (err, state) {
        /* ... */
    });

A callback can be passed to start and will be invoked once the router has transitioned to the default route.

Navigating to a specific route

Router5 exposes the following method: navigate(routeName, routeParams, opts). This method has to be called for navigating to a different route: clicks on links won't be intercepted by the router.

myRouter.navigate('section', {section: 'contact'});
// Will navigate to '/contact'

Forcing a reload

When trying to navigate to the current route nothing will happen unless reload is set to true.

myRouter.navigate('section', {section: 'contact'}, {reload: true});

Replacing current state

Set replace to true for replacing the current state in history when navigating to a new route. Default behaviour is to add an entry in history.

myRouter.navigate('section', {section: 'contact'}, {replace: true});

Custom options

You can pass any option to navigate: those options will be added to the state of your router (under meta).

Navigate callback

Like for .start(), .navigate() accepts a callback (last argument):

myRouter.navigate('route', function (err, state) {
    /* ... */
})

Stopping your router

At any time you can stop (pause) a router and it will prevent any navigation. To resume, simply invoke .start() again.

myRouter.stop();
universal applications