Issue with using nexted routing

This issue has been tracked since 2021-01-08.

Hi @EmilTholin,

Thank you for the great library. It is super helpful and we have been using it for quite some time.

Now we are trying to implement nested routing, and we are having issues in getting it to work and we are not clear what the right implementation should look like.

We have a smaller app called Library that we would like to plug in into our main app, that has its own routing. We would like to just do nested routing without modifying the main component.

In App.svelte (main component):


  import Library from "./library/Library.svelte";

  export let url = "";
  <Router {url}>
    <Route path="library" let:params>
      <Library url={url} />
    </Route>
    ...
  </Router>

In Library.svelte:


  <Router {url}>
    <Link to="colors" getProps={getProps}>
      Colors
    </Link>
    <Route path="colors" let:params>
      <Colors />
    </Route>
  </Router>

When we try to navigate to /library/colors, it hits App.svelte but not Library.svelte. What should be the Route we set to Library be so that the route picks up everything that prefixes with library/?

We tried adding basepath='/library' in the Library.svelte Router component and it does not seem to do anything either.

Is this the way how nested routing works? Any pointers are greatly appreciated.

Thank you.
Sincerely,
Anthony

anthonylai wrote this answer on 2021-01-08

nvm, got it working now! Somehow we got ourselves into an infinite loop while doing the nested routing earlier.

Thank you. Closing the issue.

More Details About Repo
Owner Name EmilTholin
Repo Name svelte-routing
Full Name EmilTholin/svelte-routing
Language JavaScript
Created Date 2017-11-28
Updated Date 2022-12-03
Star Count 1711
Watcher Count 21
Fork Count 151
Issue Count 59

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date