Route configuration
The routing configuration is a hierarchical structure used to describe the entire Dojo application, associating id
s and outlet
s 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
: Theoutlet
name for the route. This is used by theOutlet
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
andquery
), 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{}
syntaxchildren: 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.