dojo dragon main logo

Route configuration

The routing configuration is a hierarchical structure used to describe the entire Dojo application, associating ids and outlets to a routing path. The routing path can be nested using children which enables building a routing structure that can accurately reflect the requirements of the application.

The routing configuration API is constructed with the following properties:

  • id: string: The unique id of the route.
  • path: string: The routing path segment to match in the URL.
  • outlet: string: The outlet name for the route. This is used by the Outlet widget to determine what needs to be rendered.
  • defaultRoute: boolean (optional): Marks the outlet as default, the application will redirect to this route automatically if no route or an unknown route is found on application load.
  • defaultParams: { [index: string]: string } (optional): Associated default parameters (path and query), required if the default route has required params.
  • redirect: string (optional): A path to redirect to when matched exactly, params can be referenced from the matched route by the using the {} syntax
  • children: RouteConfig[] (optional): Nested child routing configuration.

src/routes.ts

export default [
	{
		id: 'home',
		path: 'home',
		outlet: 'home',
		defaultRoute: true
	},
	{
		id: 'about',
		path: 'about',
		outlet: 'about-overview',
		redirect: 'about/company'
		children: [
			{
				id: 'about-services',
				path: '{services}',
				outlet: 'about'
			},
			{
				id: 'about-company',
				path: 'company',
				outlet: 'about'
			},
			{
				id: 'about-history',
				path: 'history',
				outlet: 'about'
			}
		]
	}
];

This example would register the following paths and route ids:

URL Path Route
/home home
/about about-overview
/about/company about-company
/about/history about-history
/about/knitting about-services
/about/sewing about-services

The about-services route has been registered to match any path after /about This is at odds with the other registered routes, about-company and about-history, however Dojo routing ensures that the correct routes is matched in these scenarios.