Router API

The Dojo Router exposes an API that can be used to generate and navigate to links, get the params for the current route and check if a route id has been matched.

• link(route: string, params: Params = {}): string | undefined: Generate a link based on the route id and optionally params. If no params are passed it will attempt to use the current routes parameters, then any default parameters provided in the routing configuration. If a link cannot be generated, undefined is returned.
• setPath(path: string): void: Sets the path in the router.
• get currentParams(): { [string: index]: string }: Returns parameters in the current route
• getRoute(id: string): RouteContext | undefined: Returns the RouteContext for a route id if it is currently matched. If the route id is not matched, then return undefined.

Generating a link for a route

src/routes.ts

export default [
    {
        id: 'home',
        path: 'home',
        outlet: 'home'
    },
    {
        id: 'about',
        path: 'about',
        outlet: 'about-overview',
        children: [
            {
                id: 'about-services',
                path: '{services}',
                outlet: 'about',
                defaultParams: {
                    services: 'sewing'
                }
            },
            {
                id: 'about-company',
                path: 'company',
                outlet: 'about'
            },
            {
                id: 'about-history',
                path: 'history',
                outlet: 'about'
            }
        ]
    }
];

src/main.ts

import Router from '@dojo/framework/routing/Router';
import routes from './routes';
const router = new Router(routes);
// returns `#home`
console.log(router.link('home'));
// returns `#about`
console.log(router.link('about-overview'));
// returns `#about/company`
console.log(router.link('about-company'));
// returns `#about/history`
console.log(router.link('about-history'));
// returns `#about/knitting`
console.log(router.link('about-services'), { services: 'knitting' });
// Uses the current URL then default params to returns `#about/knitting`
// when the current route is `#about/cooking` returns `#about/cooking`
// when the current route does not contain the params returns `#about/sewing`
console.log(router.link('about-services'));
// returns `undefined` for an unknown route
console.log(router.link('unknown'));

Changing a route

import Router from '@dojo/framework/routing/Router';
import routes from './routes';
const router = new Router(routes);
// goto `#home` route
router.setPath('#home');

Getting the current parameters

import Router from '@dojo/framework/routing/Router';
import routes from './routes';
const router = new Router(routes);
// returns the current params for the route
const params = router.currentParams;

Get a matched route

Use the getRoute to return the RouteContext for a matched route id, or undefined if the route id’s path is not matched.

RouteContext:

• id: string: The route id
• outlet: string: The outlet id
• queryParams: { [index: string]: string }: The query params from the matched routing.
• params: { [index: string]: string }: The path params from the matched routing.
• isExact(): boolean: A function indicates if the route is an exact match for the path.
• isError(): boolean: A function indicates if the route is an error match for the path.
• type: 'index' | 'partial' | 'error': The type of match for the route, either index, partial or error.

import Router from '@dojo/framework/routing/Router';
import routes from './routes';
const router = new Router(routes);
// returns the route context if the `home` route is matched, otherwise `undefined`
const routeContext = router.getRoute('home');