kit
kit copied to clipboard
sveltejs
Disable router for all links
Describe the problem
I use sveltekit in a micro-frontend like usage, injecting html and js generated by svelte-kit in another website.
I used router=false option to avoid sveltekit to interfere with the router of the receiving site but keep hydration to activate some js interaction.
Since this PR was merged I should use this to keep same usage:
old: router = false / hydrate = true -> new: csr = true + set data-sveltekit-reload if you want native navigations
Unfortunately receiving site links like <a href="/">Homepage</a> are still caught by sveltekit router even if I set data-sveltekit-reload in <html> tag of the receiving site.
Describe the proposed solution
Bring back another configuration field router set to true by default.
As csr and ssr fields add a way to configure this new field in page.js or layout.js
Alternatives considered
No response
Importance
i cannot use SvelteKit without it
Additional Information
I don't have all the history of the changes of router field, I hope this issue was not already studied.
It was a very convenient feature for me, I hope I can find a solution.
I can make the PR with proposed solution if needed.
data-sveltekit-reload is the solution here. If that's not working, there's a bug, and this issue will need a reproduction
Thanks for your response. I make a reproducer here.
I know that my usage is very specific but the router config option was very perfect for my needs.
As I inject some content create with svelte-kit in other application, I need to ensure that injected code will not interfere with host app...
The new way using data-sveltekit-reload (even if it can work) would make my user override all their existing links with this option.
Can you give me more information about the decision of merging router and hydrate parameters in csr ?
Let me know if I can do anything else. I'll be very happy to contribute !
I have the same issue as @MaximeMenotti (SvelteKit app loaded as part of a much larger monolith). Setting data-sveltekit-reload on every link (even outside of the SvelteKit app) is not an option, as I don't control parts of it.
Also I use existing non-SvelteKit components that use their own history.pushState/replaceState and history.back. On history.back() the page navigates to the SvelteKit index page (even if that was never visited and thus is not in the history stack), which is not at all desired.
Let me know if you need a reproduction for this behaviour as well.
In short: please provide a way to completely disable the SvelteKit router again. Thanks!
I managed to work around the history.back() issue by calling event.stopImmediatePropagation(); in a custom popstate event listener. This prevents the event to ever reach the SvelteKit router.
I would much prefer to be able to deactivate the SvelteKit router again tough.
@MaximeMenotti took me a while to figure this out, but the reason data-sveltekite-reload isn't working in your case is perhaps best described charitably as a React bug. Essentially, this...
<a href="/" data-sveltekit-reload>
Homepage
</a>
...results in the following markup in your Next app (note the ="true"):
<a href="/" data-sveltekit-reload="true">
Homepage
</a>
In HTML, an attribute without an explicit value defaults to the empty string. React, shockingly, gets this wrong. You can work around it however by explicitly using the empty string:
<a href="/" data-sveltekit-reload="">
Homepage
</a>
You only need to do this on a top-level element.
@mgrubinger it sounds like in your case what we really want is for the SvelteKit router to disregard history entries that it didn't create — does that sound right? That feels achievable
@Rich-Harris thanks for looking into this! Yes, I think that would solve the issue in my scenario 👍
@Rich-Harris thanks a lot to look into this!
You're right I am able to work with this:
<a href="/" data-sveltekit-reload="">
Homepage
</a>
But in a other hand I feel the way to use this workaround more painful for my consumers…
I'm feeling weird about asking them to add a data-sveltekit-reload on one of their top tree html tag (on the body tag for exemple) just to be sure that the part of the app that I Inject will not interfere with the rest of their site...
Keeping the csr and ssr params but bringing back the router parameters is not an option ?
I can initiate a pull request if that helps.
For anyone finding this via search engine (like myself), the option is documented is here: Routing and Link options: data-sveltekit-reload. And multiple links can be changed via Disabling options as far as I understand.
