1

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?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
mingxingwang
  • 169
  • 4
  • 17
  • Have a look at the docs for an uri hash or fragment to understand why it's used in an SPA to route from fragment to fragment is an single page: https://en.wikipedia.org/wiki/URI_fragment and https://krasimirtsonev.com/blog/article/deep-dive-into-client-side-routing-navigo-pushstate-hash – voscausa Feb 19 '21 at 01:49

1 Answers1

4

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.

Geoff Rich
  • 4,726
  • 9
  • 22