Search code examples
sveltesveltekit

Custom 404 Error Pages in SvelteKit Not Rendering as Expected Based on Folder Structure

I'm building an application using SvelteKit and I want to create custom error pages that are specific to different parts of my application based on their folder structure. My understanding is that SvelteKit should allow me to have +error.svelte files in different folders, and any 404 errors encountered within those folders should trigger the nearest +error.svelte file.

However, this doesn't seem to be working as expected.

My current file structure looks like this:

+error.svelte
(app)/+page.svelte
(app)/+error.svelte
dashboard/+page.svelte
dashboard/+error.svelte

When I navigate to a non-existent page like dashboard/blbla, instead of rendering the +error.svelte inside the dashboard folder, it always falls back to the root +error.svelte file.

How can I configure SvelteKit to render the closest +error.svelte file within the relevant folder when a 404 error occurs? Is there something I'm missing in my setup?

I took a look at How to add a custom 404 page and a different Error page (for other errors) in SvelteKit?

But that does not work for me. Am i missing something?

Solution

  • See the other answer; it's possible.

    The docs:

    If no route can be found (404), src/routes/+error.svelte (or the default error page, if that file does not exist) will be used.

    So basically, SvelteKit only supports having a single 404 page for unknown routes. But I think that if the route does exist, and you in its load() function returns 404, then it's that route's error page that will be shown, but I'm not sure about this.