How to remove "#" in svelte spa router?

Question

I use svelte-spa-router npm module for the router of my svelte project. When using this module it adds "#" in the URL in default to denote it is the spa router. Such as "localhost:5000/#/app/.." I want to remove this "#" and make the router as the whole router such as "localhost:5000/app" Could anybody help me with this, please?

Answer 1

This is not possible with svelte-spa-router. This package is a hash-based router, and the "#" is key to how this type of router works. From the package docs:

With hash-based routing, navigation is possible thanks to storing the current view in the part of the URL after #, called "hash" or "fragment".

For example, if your SPA is in a static file called index.html, your URLs for navigating within the app look something like index.html#/profile, index.html#/book/42, etc. (The index.html part can usually be omitted for the index file, so you can just create URLs that look like http://example.com/#/profile).

When I created this component, other routers for Svelte 3 implemented navigation using the HTML5 history API. While those URLs look nicer (e.g. you can actually navigate to http://example.com/profile), they are not ideal for static Single Page Applications. In order for users to be able to share links or even just refresh the page, you are required to have a server on the backend processing the request, and building fully-static apps is much harder as a consequence.

Hash-based routing is simpler, works well even without a server, and it's generally better suited for static SPAs, especially when SEO isn't a concern, as is the case when the app requires authentication. Many popular apps use hash-based routing, including GMail!

If you want your URL to not have a "#", you will need to switch to a HTML5 history-based router such as svelte-routing or routify.