Child Router basePath inherits parent Route params

[jchand99]

Context:

Take the following code snippets:

<Router id="root">
    <Route key="home" path="/home">
        ....
    </Route>
    <Route key="pathWithParams" path="/:id/somepath">
        <Router id="sub-router" basePath="/:id/somepath">
            <Navbar /> <!-- See Navbar code snippet below -->
            <Route key="pathy" path="pathyy">
                ...
            </Route>
            <Route key="pathier" path="pathier">
                ...
            </Route>
        </Router>
    </Route
</Router>

<!-- Navbar -->
<Link href="pathy" prependBasePath>Pathy</Link>
<Link href="pathier" prependBasePath>Pathier</Link>

In this scenario, we have two Routers, "root" and "sub-router". The sub router is within a route with a route parameter. Currently, there is no logic (that I can see via some quick look at the code) in RouterEngine.svelte.ts or Link.svelte to handle when the basePath contains route parameters. So, in this hypothetical scenario, when you click either of the Link components in the browser, the literal string gets prepended to the url and location going from http://localhost:3000/1234/somepath/pathy to http://localhost:3000/:id/somepath/pathy instead. This is a little problematic.

Feature idea

The feature idea here is that the sub router can parse the basepath given to it using the same regex a route would, and can grab the parent route's route parameters list to replace the basePath dynamically. This would allow all Route components within the sub router to have access to it's parent Route's parameters, and the prependBasePath flag on Link would prepend with the route parameters already substituted rather than using the literal basePath string.

I'm planning to play around and see if I can figure out a good solution to this in the coming days. I'll update this discussion with more info/ideas as I figure things out. There might be a good solution in RouterEngine.svelte.ts to use regex to get route parameters and set them there, but maybe there is another solution within Link.svelte for this.

[webJose]

Interesting. You might want to review #30 as to my thoughts about such a mechanism, but I'd prefer to put that on hold until v2. You can read why in #147.

To be clear: I have never thought about supporting segment parameters in basePath. This catches me a bit off-guard.

Potential solution... or workaround? Don't know what you would call it:

<Router id="root">
    <Route key="home" path="/home">
        ....
    </Route>
    <Route key="pathWithParams" path="/:id/somepath">
        {#snippet children({ rp })}
            <Router id="sub-router" basePath={`/${rp?.id}/somepath`}>
                <Navbar /> <!-- See Navbar code snippet below -->
                <Route key="pathy" path="pathyy">
                    ...
                </Route>
                <Route key="pathier" path="pathier">
                    ...
                </Route>
            </Router>
        {/snippet}
    </Route>
</Router>

This is possible because basePath is reactive.

[jchand99]

Super late getting back to this, apologies. Ended up getting the Flu and then back to work and being busy again. I did a bit of looking through the code, and the best place I found to make a change would be in the Link component. The Link component would take the href it's given, including any route params like href="/:id/pathy" and parse the href, check for any parameters, and substitute any parameters that match for the path (essentially duplicating the route path logic). However, the juice doesn't seem worth the squeeze for this currently. Having to parse the href value to support the regular expression groups for route params alongside query parameters would be too much work for not enough benefit.

This also becomes not worth it even more when considering that the basePath value for the router is reactive and can just be replaced with any route parameter object given by the child snippet.

In our case the rp object needed to be passed to a separate MFE which made things a little more verbose, but it works, which is good enough for us for now.

[webJose]

Sounds like you have sorted things out. That's great. I'm very happy to hear that you are getting MFE work done with the router. After all, it is my desire and goal that it excels at micro-frontends.

By the way, if I can interest you:

You might know (since the repo is under this organization) that I am the creator of the only Vite plug-in for the popular single-spa router library for micro-frontends. I've been wanting out of single-spa for a year now, and is finally coming out: CollageJS. Inspired by the concept of single-spa parcels, it is a library ecosystem for framework-agnostic MFE's. I know you're doing Module Federation, and that's great, but it is not framework agnostic (you cannot create a Button component in React and use as-is from Module Federation as a Svelte component). Since you're versed in MFE's, this repository might interest you.

Ok, advertising over. :-)