[Aurelia 2] Reload current route (router-lite)

Help Requests
1

Sometimes I need to completely re-render a page (to go around quirks of other framework). In Aurelia 1 this was easy:

this.router.navigateToRoute(
                        this.router.currentInstruction.config.name,
                        this.router.currentInstruction.params,
                        {
                            replace: true,
                        }
                    );

Now, no matter how I try, I can’t find the way to make it work. Documentation is scarce (this topic is only described for the full router, not lite), LLMs keep advising using methods and properties that never existed or have already been replaced/removed.

2

Hi @graycrow! Have you already tried the transitionPlan: 'replace' navigation options? It is documented in Navigating | The Aurelia 2 Docs (search for transitionPlan). For more info on transitionPlan refere this documentation: Transition plan | The Aurelia 2 Docs.

3

Yes, I know about this parameter, thank you. My problem is that I cannot find a good way to find a current route details/parameters to know where to navigate to. This method is in the base class for all pages and I want it to be “self-containing”, without passing parameters to it and then reconstructing that navigation (or whatever name it is) object. There is always window.location, but it’s an “ugly” way, I think. I started to rewrite everything again to full router, because it looks like it has more “traditional” way of accessing the current route and it’s documented, but then I found that it lacks NavigationModel, which router-lite has and the original aurelia-router has as well. Now I’m stuck because I don’t know which way to take - keep digging router-lite and hope I will find something useful deep inside or drop it in favor of full router and then replace/recreate missing NavigationModel.

4

Ok, it looks like the direct replacement for the simple v1 code listed above is this:

this.router.load(
      {
        component: (
          this.router.currentTr.finalInstructions.children[0].recognizedRoute
            .route.endpoint.route.handler as any
        ).id,
        params:
          this.router.currentTr.finalInstructions.children[0].recognizedRoute
            .route.params,
        transitionPlan: 'replace',
      },
      {
        historyStrategy: 'replace',
        context: null // ???,
      }
    );

It requires some type conversion to any (because of missing types), but gets the correct id and parameters, but still doesn’t reload the page. Having read a lot about router-lite in the last few days, I suspect it’s because of missing context, but I have no idea what to put there, this throws an error.

5

I think you can leave out setting the context. As far as I can remember, that would search for the routes configured under the root component. Specifying a context always means navigating relative to that context (example: child routes).

Also, if you want to, in this scenario, always want to navigate to the currently loaded component, you might consider using the custom element definition from of the injected custom element controller.

public readonly $controller: ICustomElementController<this>;

You can put the $controller property always in a custom element, and Aurelia will always set this to the controller instance. Then you can set this.$controller.definition to the component.

If this doesn’t resolve your problem, please consider sharing a reproduction.

1 Like