CODEWITHSUNDEEP
htmlsvelte
JoJo Yawson
JoJo Yawson

Reputation: 169

How to add multiple webpages to a svelte application

I looked at Sapper and it appears to have been replaced by SvelteKit. Do I need a routing framework or what? I made my app with rollup and added SASS to it.

Upvotes: 1

Views: 3276

Answers (1)

OmG3r
OmG3r

Reputation: 1821

You need to use a front-end router.

You can use tinro or svelte-routing to create your routes.

here is an example using tinro.

<script>
    import {Route} from 'tinro'; 
    import Signup from './Signup.svelte'
</script>

<nav>
    <a href="/">Home</a>
    <a href="/signup">Signup</a>

</nav>

<Route path="/">
    <h1>This is the main page</h1>
</Route>

<Route path="/signup">
    <Signup />
</Route>

You can write your signup markup in Signup.svelte

Don't forget to add --single to your npm scripts in package.json as follows so you can navigate between the pages.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  }
}

if you intend to use server side rendering or got complexe backend logic you could read svelteKit documentation.

Upvotes: 2

Related Questions