Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with route /:name #111

Open
pjacferreira opened this issue Mar 31, 2021 · 0 comments
Open

Problem with route /:name #111

pjacferreira opened this issue Mar 31, 2021 · 0 comments

Comments

@pjacferreira
Copy link

pjacferreira commented Mar 31, 2021

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant