Search code examples
sveltesveltekit

Migrate to SvelteKit's New Routing System

Don't know about you, but I've been hearing about this new routing system in SvelteKit. I first heard about this with the +error.svelte file that I found here on the official docs. Not soon enough, I've also seen the other files like the __layout.svelte file having a + sign in front of it's filename like this: +layout.svelte on the docs.

So I've been wondering:

  • How do I migrate from the SvelteKit's old routing system to this updated routing system?
  • If possible, how to let SvelteKit do it automatically?
  • What's the importance of this new routing system?
Solution
    1. Before installing the new version, update to the most recent version by running the following command before the migration:

    npm install @sveltejs/kit@1.0.0-next.405

    1. Run the following command:

    npx svelte-migrate routes

    Running this command and hitting y should result to this:

    enter image description here

    Done!

    The following is supplementary information.

    The following is optional for read.

    I found some good material to come up with the solution above:

    Migration Guide

    Quoting Rich Harris from this page:

    New versions of SvelteKit include a design overhaul that will require some changes to your app.

    To begin migrating your app, run the following command:

    npx svelte-migrate routes

    You will need to do this before installing the new version! We recommend updating to the most recent version before these changes — @sveltejs/kit@next.405 — and ensuring that your app works with that version before running the migration.

    This will rename files inside your routes folder (see this comment to learn more about the changes), migrate some of the changes automatically and annotate your code with errors that link back to this page and tell you what needs to be manually updated. You can find these errors by searching your codebase for @migration.

    Reason of change

    One of the most important reasons I've read is this one, again quoting Rich Harris:

    There are multiple ways to express a route. src/routes/foo.svelte and src/routes/foo/index.svelte are equivalent, and having two ways to do things is always a source of confusion. Each has downsides — too many index.svelte files open in your editor gets confusing, but foo.svelte makes it awkward to colocate related files. I frequently find myself moving foo.svelte to foo/index.svelte as the route becomes more complex (e.g. it needs a dedicated error page, or it gains a child route, or I need to break something out into a separate component, or it needs a page endpoint, and so on). These changes are costly and annoying, and I always kick myself for not just always using folders.

    You may read all the other good reasons on this link.