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 an outlet id has been matched.

  • link(outlet: string, params: Params = {}): string | undefined: Generate a link based on the outlet 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
  • getOutlet(outletIdentifier: string): OutletContext | undefined: Returns the OutletContext for an outlet id if it is currently matched. If the outlet id is not matched, then return undefined.

Generating a link for an outlet

src/routes.ts

  1. export default [
  2.     {
  3.         path: 'home',
  4.         outlet: 'home'
  5.     },
  6.     {
  7.         path: 'about',
  8.         outlet: 'about-overview',
  9.         children: [
  10.             {
  11.                 path: '{services}',
  12.                 outlet: 'about-services',
  13.                 defaultParams: {
  14.                     services: 'sewing'
  15.                 }
  16.             },
  17.             {
  18.                 path: 'company',
  19.                 outlet: 'about-company'
  20.             },
  21.             {
  22.                 path: 'history',
  23.                 outlet: 'about-history'
  24.             }
  25.         ]
  26.     }
  27. ];

src/main.ts

  1. import Router from '@dojo/framework/routing/Router';
  3. import routes from './routes';
  5. const router = new Router(routes);
  7. // returns `#home`
  8. console.log(router.link('home'));
  10. // returns `#about`
  11. console.log(router.link('about-overview'));
  13. // returns `#about/company`
  14. console.log(router.link('about-company'));
  16. // returns `#about/history`
  17. console.log(router.link('about-history'));
  19. // returns `#about/knitting`
  20. console.log(router.link('about-services'), { services: 'knitting' });
  22. // Uses the current URL then default params to returns `#about/knitting`
  23. // when the current route is `#about/cooking` returns `#about/cooking`
  24. // when the current route does not contain the params returns `#about/sewing`
  25. console.log(router.link('about-services'));
  27. // returns `undefined` for an unknown route
  28. console.log(router.link('unknown'));

Changing a route

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

Getting the current parameters

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

Get a matched outlet

Use the getOutlet to return the OutletContext for a matched outlet, or undefined if the outlet is not matched.

OutletContext:

  • id: 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 outlet is an exact match for the path.
  • isError(): boolean: A function indicates if the outlet is an error match for the path.
  • type: 'index' | 'partial' | 'error': The type of match for the route, either index, partial or error.
  1. import Router from '@dojo/framework/routing/Router';
  3. import routes from './routes';
  5. const router = new Router(routes);
  7. // returns the outlet context if the `home` outlet is matched, otherwise `undefined`
  8. const outletContext = router.getOutlet('home');