mefechoel / svelte-navigator

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

Can't render a route and its parent (Outlet concept) #57

Closed amglt closed 2 years ago

amglt commented 2 years ago

Describe the bug

I can't render a route and its parent, comparison to the outlet concept of react-router

To Reproduce Steps to reproduce the behavior:

<Router>
  <Route path="/*" component={Layout}>
    <Route path="pvp" component={Pvp} />
  </Route>
</Router>

Navigating to /pvp will render Layout correctly but won't render Pvp at all

Desktop (please complete the following information):

Additional context

Maybe I just didn't understand if it's possible and how to do it

mefechoel commented 2 years ago

The reason the Pvp component is not rendered is because you supplied both a component prop to the parent route as well as a child. In that case svelte-navigator will always favor the component prop. A little modification should fix your problem:

<Router>
  <Route path="/*">
    <Layout>
      <Route path="pvp" component={Pvp} />
    </Layout>
  </Route>
</Router>

Note that svelte-navigator does not have the concept of an Outlet. If you want some parts of the ui to always be shown, you'll need to move them out of the encapsulating Route instead.