1

I used the svelte-routing module for the router in my svelte project. When I visit the link by clicking navlink in the component then it goes well, but when I visit the link directly by typing it in the browerlink I got the page not found error. For example if I visit localhost:5000 at first and click the about link then the link is changed to localhost:5000/about and goes to the about.svelte component, but when I input the link in the browser link directly localhost:5000/about then it shows page not found message. If this problem happens in the local then I think it will still happen after deployment. So I want to fix this issue.

mingxingwang
  • 169
  • 4
  • 17

1 Answers1

2

The reason this happens is because localhost:5000/about does not exist.

When you use the navlink it will actually not go to the location, only change the url but you stay on the same page.

To get this working you will need to redirect everything to index.html, basically if a user goes to yourdomain/about they should go to yourdomain/index.html and svelte-routing will take care of showing the correct route.

If you use the default svelte template it uses a package called sirv to do the hosting in localhost, in your package.json change the start command to also use the flag -s

"start": "sirv public -s --no-clear"

This will start sirv in spa mode and will redirect all unknown routes to index.html.

You are right to suspect this will not work in production either, for the exact same reasons. There you also have to add a redirect, how this is done depends on where you host, the documentation for most popular hosts has this information, if you cannot find, open a new question here as it would no longer be svelte related.

Stephane Vanraes
  • 14,343
  • 2
  • 23
  • 41
  • Thank you @Stephane, it works, but will this work even after i finally host my /build folder (static html, css and js files) into a webhost like GitHub pages ? – Ramy Hadid Apr 23 '23 at 12:25
  • @RamyHadid I don't know how to setup Github, for this but this https://stackoverflow.com/questions/36296012/is-there-a-configuration-in-github-pages-that-allows-you-to-redirect-everything thread seems to suggest to make a 404 page that is exactly the same as the index. As always check dates to see if the answer is not outdated – Stephane Vanraes Apr 24 '23 at 05:58