Dynamically mapUnknownRoutes in router-lite

vNext
1

In Aurelia 1 it was possible to dynamically map an unknown route, e.g.:

config.mapUnknownRoutes(instruction =>
{
    const productId = instruction.parentInstruction.queryParams.productId;
    if (productId)
    {
        return { redirect: `detail/${encodeURIComponent(productId)}}` };
    }
    return { redirect: 'list' };
});

Is this somehow possible in Aurelia 2 with router-lite?

Thanks for any feedback.

2 Likes
2

Hi @elitastic! Thank you for reporting this. I can prioritize this in the coming days.

FYI, the mapUnknownRoutes is generally handled by the fallback configuration option. That lacks so far the function capability.

3

Perfect, thank you for your help!

4

The feature is now available under the dev tag. For more info, refer the PR.

The change in the docs follows.

5 Likes
5

The documentation changes are also now online: https://docs.aurelia.io/router-lite/configuring-routes#fallback-redirecting-the-unknown-path.

A toy example from the docs:

import { customElement } from '@aurelia/runtime-html';
import {
  IRouteContext,
  ITypedNavigationInstruction_string,
  route,
  RouteNode,
  ViewportInstruction,
} from '@aurelia/router-lite';

@customElement({ name: 'ce-a', template: 'a' })
class A {}

@customElement({ name: 'n-f-1', template: 'nf1' })
class NF1 {}

@customElement({ name: 'n-f-2', template: 'nf2' })
class NF2 {}

@route({
  routes: [
    { id: 'r1', path: ['', 'a'], component: A },
    { id: 'r2', path: ['nf1'], component: NF1 },
    { id: 'r3', path: ['nf2'], component: NF2 },
  ],
  fallback(vi: ViewportInstruction, _rn: RouteNode, _ctx: IRouteContext): string {
    return (vi.component as ITypedNavigationInstruction_string).value === 'foo' 
      ? 'r2' 
      : 'r3';
  },
})
@customElement({
  name: 'my-app',
  template: `
  <nav>
  <a href="a">A</a>
  <a href="foo">Foo</a>
  <a href="bar">Bar</a>
</nav>

<au-viewport></au-viewport>`
})
export class MyApp {}
2 Likes