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