Objective
This recipe demonstrates how you can inspect dynamic URL parameters through the routing ecosystem in Dojo 2. This recipe also shows how to provide these dynamic URL parameters to a widget.
Procedure
- Include a dynamic path in your routing configuration:
const routingConfig = [{
path: 'contact/{id}',
outlet: 'contact page'
}];
Note: You can learn how to apply the above routing configuration within a Dojo 2 app in the ‘Render URL aware widgets’ recipe.
- Define an outlet and provide a callback function which returns the properties the wrapped widget expects:
const ContactWidgetOutlet = Outlet(ContactWidget, 'contact page', ({params}) => {
return {
id: params.id
};
});
Visit the URL:
http://localhost:9999/#contact/person-1
Your
ContactWidget
receives the object which the outlet returns:
class ContactWidget extends WidgetBase {
render() {
return v('div', [this.properties.id]); // 'person-1'
}
}
- Observe the callback passed to the
Outlet()
function is invoked with an object argument containing aparams
property.
Further reading
- The Dojo 2 Routing tutorial covers routing in more depth
- The Render a widget against a URL recipe includes minimal code to handle widget based routing