Sveltekit very simple routing example for beginners

JohnC 0
Viewed 27

Simple file based routing

I want a website to allow the following

http://127.0.0.1:5173/              show index page

http://127.0.0.1:5173/social

http://127.0.0.1:5173/walks

http://127.0.0.1:5173/members/social

http://127.0.0.1:5173/members/walks

In other words show the index page + 4 different web pages

It has changed in Aug 2022 so at the moment there lots of examples on the web that are now out of date.

url-routing sveltekit
1 Answers

Solution

within Sveltekit project folder src\routes\

src\routes\+page.svelte    -this is the index page 

src\routes\social\+page.svelte

src\routes\walks\+page.svelte

src\routes\members\social\+page.svelte

src\routes\members\walks\+page.svelte

each +page.svelte should have the contents specific to that page

In summary each web page is in its own folder and called +page.svelte.

I created social, walks, members\social and members\walks folders and added +page.svelte to each

More details here https://www.netlify.com/blog/migrating-breaking-changes-in-sveltekit/

JohnC0
Related