Flexible Filesystem-Based Routing

Sapper’s flexible filesystem-based routing provides us with the following two types of parameters:

1. Static parameters
2. Dynamic parameters

Static parameters

To render an /​about​ page, you can create either of the following two Svelte files using​ the conventionally defined route src/routes:

• src/routes/about.svelte
• src/routes/about/index.svelte

The behavior of ​src/routes/about.svelte ​and src/routes/about/index.svelte ​is the same. This provides the flexibility to define your file-system according to your use case.

Examples

• If we know that we will add more pages under the /about URL, it’s likely a good idea to create src/routes/about/index.svelte. ​You can then simply add new files in the about directory.

• If we are not sure whether more pages will be added, the simpler approach is an ​about.svelte​ file at src/routes/about.svelte.

Dynamic parameters

In web development, we often need to make pages for our entire team in which individual team members’ pages look and feel the same, but the content differs. Therefore, it is impractical to know all of their names and then create separate files for each one of them. This is where the support of dynamic parameters by Sapper comes into action.

Example

Let’s say we want to make web pages for our team members Mike and Hannaor with routes /about/team/mike and /about/team/hannaor, respectively.​