Advanced routing: Alias

[runar-rkmedia]

Describe the problem

We have a requirement for routing that I believe would require some sort of aliasing, or perhaps a routedirectory, that could use multiple / within it.

Currently we have routes like this:

/[customerId] -> should show the list of articleIds-page
/[customerId]/[articleId} should show the same list of articleIds, but with selected articleId expanded.
/customerId]/articleId/meta: should show the metapage for that articleId.
/[cusomterId]/meta should show the metapage for that customer.

Describe the proposed solution

if I could have a routefolder that could contain [customerId=customerId]/[[articleId=articleId] that would solve the problem for me, but / is not allowed in a filepath. Perhaps a different character could be used here, such as \.

An alias property could possibly also solve this:

// ./src/routes/[customerId=customerId]/[articleId=articleId]
export const alias = ({url, params}) => {
  const {articleId, ...restParams} = params
  return {
   params: restParams,
    url: url.replace("/" + articleId, '')
  }
}

which would then again match to the [customerId=customerId]-resolver.

To clearify a bit, what we would like is for our /[customerId]-page to also be active for the url /[customerId]/[articleId].

Alternatives considered

Expanding the selected articleId on the article-list-page with a search-param would solve it, and looks cleaner in my opinion. It is a bit wierd to have two full routes (as in pathname) that resolves to the same page, but as for the current situation, we are migrating a legacy-system over, and therefore we want to keep the same urls.

Using a rewrite in the reverse-proxy would not solve this on its own, but could work if combined with a search-param. That wouls solve this for our case. I am just wondering if this is something that sveltekit should be able to do on its own.

Importance

nice to have

Additional Information

No response

[dummdidumm]

Could you clarify why you need aliasing for your use case? I'm not understanding the limitations you run into. If this could be solved with rewrites then this would be a duplicate of #5703

[runar-rkmedia]

In my proposal, a sort of aliasing would help, as it could make a nested route be handled by a parent page-handler, as if the extra path-element was given as a search-param or similar.

[dummdidumm]

What I mean is, I don't understand the use case presented. What's up with / not working etc? Maybe it would help to write out examples of how the urls should look like after the params are filled in, and what's missing to make it work.

[david-plugge]

Had to read that a few times but I think I got it.
Instead of an alias I'd suggest creating a svelte component that you import in both page files. It's more verbose about what routes actually exist

[dummdidumm]

If you got it, could you elaborate? Because I still don't get it 😄

[david-plugge]

I think he is talking about this scenario:

The pages /[customerId] and /[customerId]/[articleId] should show the exact same html

/customer-1

article 1 ↓
article 2 ↓
article 3 ↓

The only difference is that on /[customerId]/[articleId] the requested article is expanded

/customer-1/article-2

article 1 ↓
article 2 ↑
  some content
article 3 ↓

So he suggests instead of creating both files/routes src/routes/[customerId]/+page.svelte and src/routes/[customerId]/[articleId]/+page.svelte you should be able to define an alias for a page.

So you would only have to create src/routes/[customerId]/+page.svelte and src/routes/[customerId]/[articleId]/+page.tswhich defines the alias

export const alias = ({url, params}) => {
  const {articleId, ...restParams} = params
  return {
    params: restParams,
    url: url.replace("/" + articleId, '')
  }
}

If you hit /customer-1/article-2 src/routes/[customerId]/+page.ts would be rendered.

In my opinion you should create a component like ArticleList and use it in both pages.

[runar-rkmedia]

Thank you @david-plugge for clearing up my terrible explanation.

I solved this for now by creating /[customerId/+layout.svelte which renders the list of articles in an accordian and added a slot into the expanded accordian, which is rendered by /[customerId][articleId]+page.server. I also had to create and an accompanying empty /[customerId/+page.svelte. It is kind of hacky, but it works.

[dummdidumm]

Thanks for clearing it up. Since there are existing ways to achieve this (I would prefer the two pages + reusable component pattern) I'm going to close this. The alternative would be to add more API which means more ways of doing the same thing and more maintenance overhead. Thanks everyone!