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

  1. 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.

  1. 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
    };
});
  1. Visit the URL: http://localhost:9999/#contact/person-1

  2. Your ContactWidget receives the object which the outlet returns:

class ContactWidget extends WidgetBase {
    render() {
        return v('div', [this.properties.id]); // 'person-1'
    }
}
  1. Observe the callback passed to the Outlet() function is invoked with an object argument containing a params property.

Further reading