Example of <Routers> spread across components?

[tyteen4a03]

I have this setup:

App.svelte:

<main>
    <Navbar />
    <div class="master-container {extraClassesString}">
        <Router>
            <Route exact path="/" component={IndexPage} />
            <Route path="/blog" component={BlogListPage} />
            <Route fallback component={NotFoundPage} />
        </Router>
    </div>
</main>

BlogListPage.svelte

    ... some common header stuff
    <Router path="/blog">
        <Route exact path="/:year/:id" let:router>{router.params.year} {router.params.id}</Route>
    </Router>

Can you provide an example of how to make this routing configuration work?

[pateketrueke]

The <Router /> used in BlogListPage.svelte should not have path, as it is taken from the route where it was mounted.

Example: https://svelte.dev/repl/c778f2efafa44e2d8ab2556fbcb66518?version=3.20.1

Your current setup would work if you use a link like /blog/blog/1/2 — because you declared the same path twice.