Svelte - routing , When I try entering any url I only get "No webpage was found" error

Question

Using "svelte-routing" because I need to load a single page from lots of different urls , with the different urls serving as parameters. For example if a client loads into my-sight/123 the sight needs to load the app.svelte component while passing 123 as a parameter. The Problem is that whatever url I enter after the "my-sight/" I always get a "No webpage was found" page. App.svelte:

<script script lang="ts">
  import MenuGenerator from './components/MenuSections/MenuGenerator.svelte';
  import { Router, Route } from 'svelte-routing';
</script>

<Router>
  <Route path="/:accomodation" component={MenuGenerator} />
</Router>

MenuGenerator.svelte:

<script script lang="ts">
  export let accomodation: string;
  console.log('hello ', accomodation);
</script>

I've tested this on https://codesandbox.io/s/svelte-routing-forked-ztddj , just add anything after the / in the url and press enter and the same text is in the console.

Edit: We have QR codes and NFC tags, their urls are set and cannot be changed. The urls are my-sight/{qr_code} . I need routing that would redirect every possible url to home and pass in the {qr_code} as a value.

Its not totally clear on what you are doing, and why you are doing it that way. Are you trying to [do this?](https://svelte.dev/repl/340dac4861e8499ca4d4092214649c3c?version=3.37.0) Your code as written says for any "/:id" always go to "Home"... — zipzit, Dec 23 '21 at 02:41
Are you trying to route via: `/my-sight?accomodation=123` ? For that you would use a `get()` request, and `let accomodation_value = request.query.get("accomodation")`. Again, its not clear on where you are going here. — zipzit, Dec 23 '21 at 02:47
We have QR codes and NFC tags, their urls are set and cannot be changed. The urls are my-sight/{qr_code} . I need routing that would redirect every possible url to home and pass in the {qr_code} as a value. — Gabrijel, Dec 23 '21 at 09:20

zipzit · Answer 1 · 2021-12-23T19:16:59.467

0

With that last edit / comment, your use case makes a whole lot more sense.

You can use window.location.pathname in the browser to identify the QR Code within the URL.

<script>
  import { Router, Route } from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import { onMount } from "svelte";
  onMount(()=>{
     let qr_code = window.location.pathname.substring(1);  // dump leading '/'
     console.log("qr_code: ", qr_code);
  })

</script>

  <Router>
    <div class="box">
      <Route path="/:id" component={Home} />
    </div>
  </Router>

(edit) This answer specifically address the need to" I need routing that would redirect every possible url to home and pass in the {qr_code} as a value.

It sounds now, like that is only a partial requirement. (/edit)

edited Dec 23 '21 at 19:16

answered Dec 23 '21 at 18:31

zipzit

3,778
4
35
63

Sadly still nothing, it's almost like no code gets ran at all when any other url is entered. And sadly I cant really give you any error logs, if I enter any other url it just gives me a "No webpage was found" page. And yes I've added this code to my project: ` onMount(() => { let qr_code = window.location.pathname.substring(1); // dump leading '/' console.log('qr_code: ', qr_code); }); ` – Gabrijel Dec 23 '21 at 18:44
Yeah.. I will say, looking at this problem gave me a huge insight to SvelteKit. It seems a key function of [SvelteKit is to provide the router.](https://svelte.dev/faq#is-there-a-router) Although you can use router to go to a dynamic route (`[id]-[category].svelte` you can only use `request.query` with and .js or .ts API style endpoint. – zipzit Dec 23 '21 at 18:50
Ouch. What you are saying is with the current setup, you can manage NFC stuff, but absolutely nothing else (About Us, Contact Us, Normal menu item XXX, etc...) Note: I suspect [this posting would be of help...](https://stackoverflow.com/questions/68187584/how-to-route-programmatically-in-sveltekit) – zipzit Dec 23 '21 at 19:12

score 0 · Answer 2 · answered Dec 23 '21 at 19:19

0

SOLVED !!!

I needed to uncomment a line of code in my snowpack config.

The line of code is:

//{ match: 'routes', src: '.*', dest: '/index.html' },

Tnx for the help !

answered Dec 23 '21 at 19:19

Gabrijel

11
3

Svelte - routing , When I try entering any url I only get "No webpage was found" error

2 Answers2