svelte-navigator icon indicating copy to clipboard operation
svelte-navigator copied to clipboard

Plugin has no support for optional parameters

Open CatchABus opened this issue 2 years ago • 3 comments

Is your feature request related to a problem? Please describe. Plugin has no support for optional path parameters.

Describe alternatives you've considered Svelte navigator could drop hardcoded path parsing and make use of one of most used packages: https://www.npmjs.com/package/path-to-regexp https://www.npmjs.com/package/regexparam (a lightweight solution)

CatchABus avatar Sep 26 '22 16:09 CatchABus

That would be a huge improvement for svelte-navigator!

I would like to use the following syntax that is common in other frameworks like Vue:

path="/bar/foo/:id?"

maurictg avatar Oct 14 '22 09:10 maurictg

That will make a lot of sense

Kokoserver avatar Oct 18 '22 02:10 Kokoserver

You can achieve this in a complicated way by nesting routes. This should only be used as a workaround in my opinion.

App.svelte

<script>
  import { Router, Route } from "svelte-navigator";
</script>
<Router>
  <Route path="/route/:requiredParam/*" let:params={params1}>
    <Route path="/optionalRoute/:optionalParam" let:params={params2}>
      <RouteComponent requiredParam={params1.requiredParam} optionalParam={params2.optionalParam}></RouteComponent>
    </Route>
    <Route path="/">
      <RouteComponent requiredParam={params1.requiredParam}></RouteComponent>
    </Route>
  </Route>
</Router>

RouteComponent.svelte

<script>  
  export let requiredParam;
  export let optionalParam= null;
</script>

rehmulus avatar Nov 04 '22 17:11 rehmulus