Svelte route gives me 404

Question

I created a simple router for my app in Svelte. It is working if I'm accessing the link from the nav bar. If I reload the page, it give me 404.. why ?

<Router url="{url}">
 <nav>
   <Link to="/">Home</Link>
   <Link to="charts">About</Link>
 </nav>
 <div>
  <Route path="charts" component="{About}" />
  <Route path="/"><Home /></Route>
 </div>
</Router>

After reload: This localhost page can’t be found No webpage was found for the web address: http://localhost:5000/charts

Answer 1

You must make sure your server is serving the index.html for every route path and not just for /.

If you e.g. are using sirv with one of the Svelte starter projects you can add the --single flag to the script.

"scripts": {
  "start": "sirv public --single",
  "start:dev": "sirv public --dev --single"
},

Answer 2

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

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

in your package.json file , it worked for me

Answer 3

As mentioned in one of the comments above, if using roll-up, the following combination of scripts will work when calling npm run dev

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  }