jorgegorka/svelte-router

Problem with route /:name

Opened this issue · 0 comments

Hi,

I'm having a problem with route determination and named parameters.
Actually I have several problems, but I will write up an issue per problem.

This initial issue describes the test environment.

I did this on a brand new project (svelte typescript) and modified the project to add a route for testing.

to setup the project I did the following (as per the svelte guide):

npx degit sveltejs/template scratchpad
cd scratchpad
node scripts/setupTypeScript.js

npm i svelte-router-spa --save-dev

I'm using the latest 6.0.1 version of the router.

I basically modified the App.svelte to read

<script lang="ts">
  import { Router } from "svelte-router-spa";
  import routes from "./routes";
</script>

<Router {routes} />

defined routes.ts as

import IndexPage from './pages/index.svelte'
import NextPage from './pages/next.svelte'

const routes = [
  {
    name: '/:name',
    component: IndexPage
  },
  {
    name: '/:name/next/:last',
    component: NextPage
  }
];

export default routes;

both index.svelte and next.svelte are slightly modified copies of the default App.svelte content.

index.svelte

<script lang="ts">
  export let currentRoute: any;
  export let params: any;

  console.log(params);
</script>

<main>
	<h1>Hello {currentRoute.namedParams.name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<p>index.svelte</p>
</main>
...

next.svelte

...
<main>
	<h1>Hello {currentRoute.namedParams.name} {currentRoute.namedParams.last} !</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<p>next.svelte</p>
</main>
...

Test were run on Google Chrome (Linux) 89.0.4389.114

Problems with route /:name

First Using url (http://localhost:5000/) results in "HELLO /!":

  • ERROR: Output was "HELLO /!" expected something like "HELLO UNDEFINED!" since no value was passed in for parameter :name
  • Browser history/url is modified to http://localhost:5000 missing the leading slash. Not a major problem since it means the same thing

Second Problem url (http://localhost:5000/:test):

  • CORRECT: Output "HELLO :TEST!"
  • ERROR: Browser history/url is modified to http://localhost:5000, which is not the same thing.

Correct Results as exemplified by url (http://localhost:5000/&name):

  • Output "HELLO &NAME!"
  • Browser history/url not modified