Open adjourn opened 1 year ago
Tried out my first suggestion locally, works wonderfully.
let scope1= null;
let scope2= null;
return (
<>
<div ref={scope1}>
<Router source={integration1} scopeEl={scope1}>
<Routes1 />
</Router>
</div>
<div ref={scope2}>
<Router source={integration2} scopeEl={scope2}>
<Routes2 />
</Router>
</div>
</>
);
Changes in router (node_modules dist/index.js
):
// Router
const routerState = createRouterContext(integration, base, data, out, scopeEl);
// ...
function createRouterContext(integration, base = "", data, out, scopeEl) {
// ...
const target = scopeEl || document;
target.addEventListener("click", handleAnchorClick);
onCleanup(() => target.removeEventListener("click", handleAnchorClick));
What do you think?
We should look at this.. Either that or have the router create an element itself.
Describe the bug
I'm making the assumption here that this package supports multiple routers running at the same time as it does use context for isolation instead of some kind of global store. Described bug is not an issue if my assumption is wrong.
Router component provides context which isolates and enforces the scope of router functionality. For example
useLocation
under<Router>
returns the location for that particular router.Link click handling (
A
component) breaks that principle and functionality because link click event handler is added todocument
and if you have multiple routers (with default integration or custom), only one integration setter will be always called.I propose to handle it in some sort of scoped way, for example:
<Router scopeEl={htmlElementRef} source={integration}>
andOr a bit more advanced (and potentially buggy): automatically find the nearest parent HTML element for
<Router>
.Your Example Website or App
https://codesandbox.io/s/solid-app-router-example-forked-25ysls?file=/Index.js
Steps to Reproduce the Bug or Issue
/
) if not already there and open consoleYou can see in logs
[router 1] set global loc:
that even though this link is rendered under second<Router>
, it will still invoke the setter for first<Router>
integration.Expected behavior
Link behaviour respects the context. Link rendered under
<Router1 source={integration1}>
should invoke theintegration1
setter. Link rendered under<Router2 source={integration2}>
should invoke theintegration2
setter.Screenshots or Videos
No response
Platform
Additional context
No response