Aurelia 2 router: Re-use components with different route configuration

Greetings.
As a personal experiment, I am trying to build a simple library application with Aurelia 2.
The application has several configuration pages which share the exact same logic, with the only difference being the API path that their actions should call.

This is how I have configured the routes (with configured routing) in the main application shell:

import { route, Routeable, RouteConfig } from "aurelia";

const routes: Routeable[] = [
    {
        id: "authors",
        path: "authors",
        component: import("./pages/indexPage"),
        transitionPlan: "replace",
        title: "Autori",
        data: { path: "author" }
    },
    {
        id: "genres",
        path: "genres",
        component: import("./pages/indexPage"),
        transitionPlan: "replace",
        title: "Generi",
        data: { path: "genre" }
    }
];

@route({ routes: routes })
export class ApplicationRoot {
}

This is the application startup:

Aurelia
  .register(RouterConfiguration.customize({
    useUrlFragmentHash: false,
    useHref: true,
    routingMode: "configured-only",
    sameUrlStrategy: "reload"
  }))
  .app(ApplicationRoot)
  .start();

And this is roughly how the routed pages work:

async canLoad(_, next: RouteNode) {
    const path = next.data.path;
    // fetch data from the path
}

This does work, but navigation between pages fails (the hooks are not even triggered), I assume because they share the same component and differ only in parameters.

(I doubt all of the parameters are needed, but since the documentation is currently lacking I tried what I found in the typings. Furthermore, useUrlFragmentHash: true does not seem to work and I am not sure what useHref is meant to do.)

Since this is a common use case in the application I work to maintain (which we plan to eventually migrate to Aurelia 2 when it will be stable), I would like to know if what I am trying to do is supported.

1 Like