Routing Middleware

[agubler]

Enhancement

A routing middleware that can be used to:

• conditionally render content based on the an outlet
• create links
• determine whether an outlet is active
• provide path and query params.

Possible example usage for routing middleware:

const factory = create({ routing });

const MyWidget = factory(function MyWidget({ middleware: { routing } }) {
  let node: any = undefined;
  if (routing.isExact("home")) {
    return <div>bar menu</div>;
  }
  if (routing.isMatch("details")) {
    const { params, queryParams } = routing.getParams("details");
    return (
      <div>
         <span>{JSON.stringify(queryParams)}</span>
         <span>{JSON.stringify(params)}</span>
      </div>
    );
  }
  if (routing.isMatch("about")) {
    return <div>about</div>;
  }
  return null;
});

The middleware could be a factory to that accepts routing configuration to be registered, falling back to using a router defined as an injector, this would provide backwards compatibility with applications that are using class-based widgets.

Additional consideration(s):

• Support for route based code splitting