question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Optional route with matcher followed by rest parameters

See original GitHub issue

Describe the bug

Given a [[lang=lang]]/[...path] route, kit will fail to catch non-matched URLs with the rest parameters route.

The same doesn’t happen if the optional route is followed by a static one: [[lang=lang]]/t/[...path].

// params/lang.js
export const match = (param) => {
  return ['fr', 'de'].includes(param);
};

I would expect:

/home -> { lang: undefined, path: 'home' } -> gives 404
/de/home -> { lang: 'de', path: 'home' } -> correct

In the [[lang=lang]]/t/[...path] scenario, it works as expected:

/t/home -> { lang: undefined, path: 'home' } -> correct
/de/t/home -> { lang: 'de', path: 'home' } -> correct

A common use case for this would be an i18n site with dynamic pages being served by a CMS.

Reproduction

Here’s a stackblitz reproducing the issue: https://stackblitz.com/edit/sveltejs-kit-template-default-4srbff?file=src/routes/+layout.svelte

And here’s another one showing the correct expected behaviour by placing a static route after the optional one: https://stackblitz.com/edit/sveltejs-kit-template-default-a3vmdd?file=src/routes/+layout.svelte

Logs

No response

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M2
    Memory: 50.08 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm
    Watchman: 2022.10.03.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 107.1.45.116
    Chrome: 107.0.5304.87
    Firefox: 106.0.5
    Safari: 16.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.87
    @sveltejs/kit: 1.0.0-next.538  => 1.0.0-next.538
    svelte: ^3.44.0 => 3.52.0
    vite: ^3.1.0 => 3.2.3

Severity

serious, but I can work around it

Additional Information

No response

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
pdrbrndcommented, Nov 8, 2022

That’s right. I see that we have access to params on every load function, even in a layout outside.

Even tho I understand the limitation of the greedy Regex approach, it still feels a bit inconsistent when taking into account static routes. I feel that it’s easy for a case like the current example in the optional routing docs to evolve into a catch-all route and, suddenly, the behaviour changes because of implementation details. Anyway, the addition to the docs is most welcome.

Feel free to close the issue if this is indeed working as designed.

Thank you for all the support 😃

1reaction
dummdidummcommented, Nov 8, 2022

[...rest] includes zero to n segments, so in a sense it’s also optional, yes. I don’t know for what you use the lang parameter, but you could still infer it from the rest segment. For de/home the params object would be { rest: "de/home" } so you could add your own little check to that and extract the language from that. You could do that inside your load function, no handle hook needed.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Optional route parameters · Issue #5072 · sveltejs/kit
I suggest to match the first rest param with as much from the path as possible and then continue to the right.
Read more >
React Router with optional path parameter
React Router v1, v2 and v3 ... You use parenthesis ( ) to wrap the optional parts of route, including the leading slash...
Read more >
Advanced routing • Docs • SvelteKit
Note that an optional route parameter cannot follow a rest parameter ( [...rest]/[[optional]] ), since parameters are matched 'greedily' and the optional ......
Read more >
Angular Route Parameters: A Simple Guide
There are three types of route parameters in Angular: required parameters,; optional parameters, and; query parameters. In this article, we present how basic ......
Read more >
Tutorial: Creating custom route matches
In this tutorial, you'll build a custom route matcher using Angular's UrlMatcher . This matcher looks for a Twitter handle in the URL....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found