CODEWITHSUNDEEP
javascriptuser-interfaceroutessvelte
Raul Martin
Raul Martin

Reputation: 561

Svelte route gives me 404

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

Upvotes: 20

Views: 11738

Answers (5)

Judith lobo
Judith lobo

Reputation: 267

Change

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

To this

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

in your package.json file, it worked for me.

Upvotes: 2

Harsh Kothari
Harsh Kothari

Reputation: 512

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

Upvotes: 3

kinr-jay
kinr-jay

Reputation: 111

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

Upvotes: 11

Tholle
Tholle

Reputation: 112787

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

Upvotes: 28

Morphyish
Morphyish

Reputation: 4062

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.

Upvotes: 0

Related Questions