# Router-lite: navigate to optional param within same route

**URL:** <https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115>\
**Category:** vNext\
**Created:** [March 10, 2023, 12:38pm UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115 "2023-03-10T12:38:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [March 10, 2023, 12:38pm UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/1 "2023-03-10T12:38:15Z")

</div>

Let’s say we have an active route, e.g. ‘route-1’.

```auto
getRouteConfig() {
  return {
    routes: [
      { route: 'route-1', component: Component1 }
    ]
  };
}

```

1. In Au1 it was possible to navigate within the same route:

2. Furthermore, it was possible to extend it like

Are these 2 concepts somehow possible in router-lite / Au2?

Thanks for any help.

**UPDATE**  
Just had some partial success: [routing within same route - StackBlitz](https://stackblitz.com/edit/au2-conventions-dne1ec)

`this.router.load('../product', { queryParams: { id: 'product-1' } });`

and

```auto
loading(params, next: RouteNode) {
  this.id = next?.queryParams.get('id');
}

```

Is this the correct way? Is it possible to force a refresh of the lifecycle hooks / a refresh of the route? Currently it only updates the url.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 10, 2023, 5:28pm UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/2 "2023-03-10T17:28:14Z")

</div>

Thanks @elitastic for reporting this.

Seems like a missing feature. I can add the feature in coming days. It might look something like below.

```ts
this.router.load(
  { component: Product, params: { id: 'product-1' } }, // <- this works already
  { transitionPlan: 'replace' | 'invoke-lifecycle' }
);

```

However, it might take some time, as there are already some ongoing work.

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [March 13, 2023, 9:12am UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/3 "2023-03-13T09:12:05Z")

</div>

Thanks for the feedback @Sayan751. I am still a bit confused about how routing works in Aurelia 2 (router-lite).

1. Is it possible to navigate by queryParams in `load` custom attribute?

2. In general, how is the route id differentiated from the routing path?

3. Shouldn’t it be possible to route by params in `router.load()` (like it is in the load custom attribute)?

4. Is it possible to route to a route id combined with passing a route context? E.g.:

Thanks for any help!

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 16, 2023, 5:12pm UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/4 "2023-03-16T17:12:40Z")

</div>

Hi @elitastic! Sorry for the delayed reply. I would primarily point you to the relevant docs for this: [https://docs.aurelia.io/router-lite/navigating](https://docs.aurelia.io/router-lite/navigating). The docs should sufficiently cover this topic.

Now to answer your individual questions…

> 1. Is it possible to navigate by queryParams in `load` custom attribute?

No. The load attribute does not support binding query parameters. Please refer to the [docs](https://docs.aurelia.io/router-lite/navigating#using-the-load-custom-attribute), for the supported properties of the `load` CA.

> 1. In general, how is the route id differentiated from the routing path?

From the [docs](https://docs.aurelia.io/router-lite/configuring-routes#advanced-route-configuration-options):

> The unique ID for this route. The router-lite implicitly generates a `id` for a given route, if an explicit value for this property is missing. … this can be used to generate the `href` s in the view when using the [`load` custom attribute](https://docs.aurelia.io/router-lite/navigating#using-the-load-custom-attribute) or using the [`Router#load` API](https://docs.aurelia.io/router-lite/navigating#using-the-router-api). Using this property is also very convenient when there are multiple aliases for a single route, and we need a unique way to refer to this route.

> Is `xy` a route id or a route path? Could it be both?

Yes, it could be both. Sometimes, the lookup using the route-ids is often prioritized internally over recognizing a path. However, as the `route` property is polymorphic, you are free to choose among route-id, path, or a route view-model class.

> 1. Shouldn’t it be possible to route by params in `router.load()` (like it is in the load custom attribute)?

It is already possible. Instead of,

```js
this.router.load('product', { params: { id: 'product-1' } }

```

you need to do this

```js
this.router.load({ component: 'product', params: {id: 'product-1' } })

```

Check out this working example: [router-lite - IRouter#load - string-instructions - StackBlitz](https://stackblitz.com/edit/router-lite-irouter-load-string-instructions?file=src%2Fmy-app.ts,src%2Fmy-app.html).

> 1. Is it possible to route to a route id combined with passing a route context?

Yes, it is possible. Refer to the docs: [https://docs.aurelia.io/router-lite/navigating#customize-the-routing-context](https://docs.aurelia.io/router-lite/navigating#customize-the-routing-context). However, it works only if the route-id is used. Thus, the following from your example won’t work.

```html
<a load="route: ../product; params.bind: { id: 'product-1' }">Navigate</a>

```

The assumption is that if you are binding a path, then you can also add the parameters. Using a path and the parameters at the same time can be semantically confusing, IMO. In your example, you have done something like below.

```ts
    this.router.load('product-path', {
      queryParams: { id: 'product-1' },
      context: this.routeContext.parent,
    });

```

This is also incorrect, as you are trying to add the route (path) parameters to the query.

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [March 17, 2023, 3:50pm UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/5 "2023-03-17T15:50:38Z")

</div>

Many thanks for your help.

Some things seems still a bit confusing for me, e.g. providing a route id to a property called `component` looks very generic for me: `this.router.load({ component: 'route-id', params: {id: 'param1' } })`

Furthermore, mixing params and queryParams in combination with routing context is quite complex and was a lot easier in Aurelia 1 in my opinion:

Au2

```auto
this.router.load(
{
  component: 'route-id',
  params: { id: 'param1' }
},
{
  context: this.routeContext.parent,
  queryParams: { optionalParam: 'test123' },
}
);

```

vs Au1

```auto
this.router.navigateToRoute('route-id', { id: 'param1', optionalParam: 'test123' });

```

I think I will try to write my own custom attribute to handle my needs, that’s fine for me. Thanks for your help anyway.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 17, 2023, 6:40pm UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/6 "2023-03-17T18:40:31Z")

</div>

Note that you can add any number of unconfigured parameters while using `load` in the `params` object. Those will be automatically added to the query string.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 17, 2023, 6:43pm UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/7 "2023-03-17T18:43:13Z")

</div>

> [@elitastic](#):
>
> Some things seems still a bit confusing for me, e.g. providing a route id to a property called `component` looks very generic for me: `this.router.load({ component: 'route-id', params: {id: 'param1' } })`

This is because we are trying to keep the API polymorphic. If there were a separate `load` method for every supported overload, it might not be very user-friendly IMO. Do you have an alternative in mind?

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [March 20, 2023, 7:58am UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/8 "2023-03-20T07:58:35Z")

</div>

That’s great, I didn’t know that!

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [March 20, 2023, 8:19am UTC](https://discourse.aurelia.io/t/router-lite-navigate-to-optional-param-within-same-route/5115/9 "2023-03-20T08:19:22Z")

</div>

> [@Sayan751](#):
>
> This is because we are trying to keep the API polymorphic. If there were a separate `load` method for every supported overload, it might not be very user-friendly IMO. Do you have an alternative in mind?

OK, I understand your polymorphic approach. I just did not expect that the `component` property can be passed a route id because of the property name `component`. It rather reminds me of the direct routing from aurelia-direct-router (route to component).

But it’s fine for me, I now understand the point of the `component` prop.