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

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"
  }

Answer 2

First of all, we won't be able to access your link as it is a local link only accessible from your local machine.

However my bet would be a redirection issue. You are trying to access the chart file on your server, that arguably doesn't exists as your router is supposed to do that job.

You need to configure your server so that every route is redirected to your index file, and then the router will be able to do it's job by analyzing the url.

Answer 3

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

If you eg 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 4

This is for those who want to host the svelte apps, If your hosting provider supports adding redirect or rewrite rules then you can do this to serve the index.html for any request you make which the router can handle.

For example, Set source as /* the / refers to the path and the wildcard * refers to match arbitrary request paths.

and then set your destination to just / that's it. don't set the destination as /index.html or else all requests will open your home page for example if you try to open www.example.com/about then it will open www.example.com/index.html

and set the action as Rewrite instead of Redirect

and this also solves the problem of refreshing the site and opening the URL directly from browswer

Answer 5

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

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

in your package.json file , it worked for me