mefechoel / svelte-navigator

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

<Svelte component> was created with unknown prop 'location' & 'navigate' #25

Closed fjanon closed 3 years ago

fjanon commented 3 years ago

I am getting these messages in the browser for a bunch of my Svelte components:

MainSidebar.svelte:18 was created with unknown prop 'location' MainSidebar.svelte:18 was created with unknown prop 'navigate'

To avoid these messages, I have to define and export 2 variables/properties:

export let location // object with pathname: "/main/dashboard" export let navigate

Do I have to do that for every single of my components? I didn't see any of this in the examples.

mefechoel commented 3 years ago

If you render your route components like this <Route ... component={MyComponent} />, svelte navigator will inject the routers location and the scoped navigate function (and route params) as props. Svelte will always warn you about unknown props... If you dont need them you can define your routes like this: <Route ...><MyComponent /></Route>. That way no props will be injected and everything else works the same. If you need the location or the navigate function (or route params) you can use route slot props to acces them: <Route ... let:location let:navigate let:params> ... </Route>.

malmod commented 2 years ago

If you need the location or the navigate function (or route params) you can use route slot props

How would you combine lazy loading and route params?

Edit: managed to do it by adding let:params on the route, and adding them again on Lazy