mefechoel/svelte-navigator

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

amglt opened this issue · 1 comments

amglt commented

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):

  • OS: Windows 10
  • Browser: Chrome
  • Version 3.1.5

Additional context

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

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.