# Struggling with the new router (AU2)

**URL:** <https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710>\
**Category:** vNext\
**Created:** [March 30, 2022, 8:34pm UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710 "2022-03-30T20:34:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [March 30, 2022, 8:34pm UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/1 "2022-03-30T20:34:48Z")

</div>

Having spent over 4 hours trying to get this to work, I though I might ask the community.

Using the latest alpha (v.26), I’m trying to get this URL to work:  
`/package/Foo.Bar` where Foo.Bar is a named argument (signature).

My initial attempt involved a route setup in my-app.ts in the shape of:  
` { path: ["package/:signature"], component: import("./routes/package-page/package-page") }`  
This works but fails when there is a period in the signature, as this may be a limitation with push state (unsure) and it causes issues with the webpack dev server, I tried to enable useUrlFragmentHash so that at least this url would work:

`/#package/Foo.Bar`  
I could not get this to work in any way, toggling useUrlFrameworkHash caused all my `load` attributes to stop working (I can provide details if there is a need).

Next, I tried using a good old query string:  
`/package?signature=Foo.Bar`

By registering my route simply as ‘package’ I was able to hit the load lifecycle hook however signature was no-where to be found as a parsed argument (I was expecting for Aurelia to provide me signature as an entry in the params dictionary).

One more attempt: `/package(signature=test)`  
This again triggers the load lifecycle hook however the params dictionary was empty again.

The new router sounds really great on paper but I’ve had (and am still having) a hard time understanding how to properly use it. The docs are somewhat helpful but a lack of samples is really hurting. I’m happy to help on the docs once I’m comfortable with the new Router. Meanwhile, can anyone shed some light on the above? Thanks!

---

<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 31, 2022, 5:42am UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/2 "2022-03-31T05:42:48Z")

</div>

Hi @Sjaak! Can you please try this configuration:

```nohighlight
{
   id: "package"
   path: "package/:signature", 
   component: import("./routes/package-page/package-page")
}

```

And then use the `load` attribute to specify URL in the view:

```nohighlight
<a load="route:package; params.bind:{signature: 'foo.bar'}">View Profile</a>

```

In case it does not help, please share a GH repo that minimally reproduces the issue.

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [March 31, 2022, 5:31pm UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/3 "2022-03-31T17:31:23Z")

</div>

Thanks for jumping on this!

Here is the repro: [aurelia-router-issue-repro/my-app.html at master · koenbeuk/aurelia-router-issue-repro · GitHub](https://github.com/koenbeuk/aurelia-router-issue-repro/blob/master/src/my-app.html)

None of these links work ☹

---

<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 31, 2022, 7:59pm UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/4 "2022-03-31T19:59:19Z")

</div>

Thank you for sharing the repo.

First thing first, you are right, a period (`.`) won’t work because it is reserved for internal usage in the router. However, we might want to raise a useful error for that. @bigopon What do you think about that?

Having said that, the following works for me. Note the usage of `id`, which is later used in the `load#route`.

```diff
diff --git a/src/my-app.html b/src/my-app.html
index 369463f..7b0ac6d 100644
--- a/src/my-app.html
+++ b/src/my-app.html
@@ -1,33 +1,13 @@
-<import from="./welcome-page"></import>
-<import from="./about-page.html"></import>
-<import from="./missing-page"></import>
-
 <h1>Overview</h1>
 
 <h1>Links defined in my-app.html</h1>
 <ul>
   <li>
- <a load="route: about-page; params.bind: { id: 'foo.bar'}">load="route: about-page; params.bind: { id: 'foo.bar'}"</a>
- </li>
-
- <li>
- <a load="route: about-page2; params.bind: { id: 'foo.bar'}">load="route: about-page2; params.bind: { id: 'foo.bar'}"</a>
- </li>
-
- <li>
- <a load="about-page2?id=foo.bar">load="about-page2?id=foo.bar"</a>
- </li>
-
- <li>
- <a href="about-page2?id=foo.bar">href="about-page2?id=foo.bar"</a>
- </li>
-
- <li>
- <a load="about-page/foo.bar">load="about-page/foo.bar"</a>
+ <a load="route: about-page; params.bind: { id: 'foobar'}">load="route: about; params.bind: { id: 'foobar'}"</a>
   </li>
 
   <li>
- <a href="about-page/foo.bar">href="about-page/foo.bar"</a>
+ <a href="about-page/foobar">href="about-page/foobar"</a>
   </li>
 </ul>
 
diff --git a/src/my-app.ts b/src/my-app.ts
index f94685c..529214a 100644
--- a/src/my-app.ts
+++ b/src/my-app.ts
@@ -8,12 +8,9 @@ export class MyApp {
           component: import("./welcome-page")
         },
         {
+ id: "about-page", // <-- this id is important because this is what is referred in the load#route
             path: "about-page/:id",
             component: import("./about-page")
- },
- {
- path: "about-page2",
- component: import("./about-page")
         }
       ]
 }

```

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [April 1, 2022, 9:21am UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/5 "2022-04-01T09:21:19Z")

</div>

> [@Sayan751](#):
>
> First thing first, you are right, a period ( `.` ) won’t work because it is reserved for internal usage in the router.

From a user perspective, I would indeed expect either an error here- or preferrable, for aurelia to somehow escape my period characters so that I don’t have to worry about what characters are legal in a route. This is particularly relevant for the following syntax:  
`load="route: about-page; params.bind: { id: 'foo.bar'}"`  
as I’m under the impression that aurelia will take care of formatting a valid URL based on the arguments that I gave this directive (plus I’m pretty sure this used to work in AU1 but I may need to double check that…)

> [@Sayan751](#):
>
> Having said that, the following works for me

I’m still looking for a way to forward a simple argument to a route (that argument happens to contain a period). Currently, I’m using href with a query string argument applied and I’m manually parsing the query string in my component, I should not have to do that.

In addition, there seems to be no way of creating a route with optional parameters, I would have expected the following to work:  
`load="route: about-page; params.bind: { foo: 'bar' }"`  
such that in about-page.ts, I can express:

```javascript
load(params) {
  alert(params.foo); // I would have expected foo to be available. Instead its undefined.
}

```

This used to be a feature in AU1.

> [@Sayan751](#):
>
> Note the usage of `id` , which is later used in the `load#route` .

I didn’t get that from the docs, will revisit and possibly issue a PR or otherwise open up an issue.

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [April 1, 2022, 10:22am UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/6 "2022-04-01T10:22:59Z")

</div>

If you’re willing to switch to the `aurelia-direct-router` (which will soon be back in the core again), the route configuration you have

```nohighlight
        {
            path: "about-page/:id",
            component: import("./about-page")
        },

```

will make sure the following links all work

```nohighlight
    <a load.bind="{ component: 'about-page', parameters: { id: 'foo.bar' } }">load.bind="{ component: 'about-page', parameters: { id: 'foo.bar' } }"</a>
    <a load="about-page/foo.bar">load="about-page/foo.bar"</a>
    <a load="about-page?id=foo.bar">load="about-page?id=foo.bar"</a>

```

Note that if you’re using a configured route to `import` a component, such as `component: import("./about-page")`, you normally shouldn’t have an `<import>` element for the same component in the html file since that will bypass the benefits of `import()`.

If you want to try the `aurelia-direct-router`, simply do

```auto
npm i aurelia-direct-router

```

and change your `main.ts` so that `RouterConfiguration` is imported from `aurelia-direct-router` instead of `aurelia`.

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [April 1, 2022, 11:13am UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/7 "2022-04-01T11:13:01Z")

</div>

Awesome! I will take a look later today for sure!

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [April 1, 2022, 11:16am UTC](https://discourse.aurelia.io/t/struggling-with-the-new-router-au2/4710/8 "2022-04-01T11:16:11Z")

</div>

Let me know if you run into any issues or have any questions.