mefechoel / svelte-navigator

Simple, accessible routing for Svelte
Other
506 stars 39 forks source link

Plugin has no support for optional parameters #93

Open CatchABus opened 1 year ago

CatchABus commented 1 year ago

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)

maurictg commented 1 year ago

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?"
Kokoserver commented 1 year ago

That will make a lot of sense

rehmulus commented 1 year ago

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>