如何在SvelteKit中添加自定义404页面和不同的错误页面(用于其他错误)?

基本上，如何做ff。在SvelteKit:

先添加自定义404页面
有一个不同的通用错误页面，将显示关于SvelteKit错误的消息/描述

在阅读了更新后的文档后，我发现了这个:

<标题>更新解决方案:

如果在load期间发生错误，SvelteKit将呈现默认错误页面。您可以在每个路由的基础上自定义此错误页面an+error.svelte文件:

src/routes/blog/[slug]/+error.svelte
<script>
import { page } from '$app/stores';
</script>
<h1>{$page.status}: {$page.error.message}</h1>

SvelteKit将"沿着树走"寻找最近的错误边界-如果上面的文件不存在，它会尝试src/routes/blog/+error.svelte和src/routes/+error.svelte显示默认的错误页面。

当然，这是您自己的错误页面组件，因此您可以随意修改它。顺便说一下，我在我的网站上放了一个GIF，这样即使它是一个错误页面，它也会看起来很漂亮，希望用户在我的网站上看到错误时不会那么生气;)

<标题>

过时的解决方案:如果您的代码中有以下内容，请将其更新为文档中找到的更新解决方案(如上所示)

在你的路由中创建一个__error.svelte文件文件夹。

<script context="module">
export function load({ error, status }) {
return {
props: {
title: `${status}: ${error.message}`
}
};
}
</script>
<script>
export let title;
</script>
<h1>{title}</h1>

我们还没有完成!您可以检查状态码，然后呈现不同的屏幕组件。(顺便说一下，您可以在load函数中配置props):

<script context="module">
export function load({ error, status }) {
return {
props: {
message: error.message,
status // same as status: status
}
};
}
</script>
<script>
import ErrorScreen from '../components/screens/ErrorScreen.svelte'; // your own Error screen component
import NotFoundScreen from '../components/screens/NotFoundScreen.svelte'; // your own 404 screen component
export let message;
export let status;
</script>
{#if status == 404} <!-- Used '==' instead of '===' to match string/number status code (just to be sure) -->
<NotFoundScreen />
{:else}
<ErrorScreen {message} {status} />
{/if}

你都准备好了!您可以通过将#if status == 404更改为#if status == 500来测试它，看看是否一切正常。(别忘了把它改回404)。

2022年12月解决方案

按照docs: https://kit.svelte.dev/docs/advanced-routing#rest-parameters-404-pages

创建:src/routes/[...path]/+page.js包含:

import { error } from '@sveltejs/kit';
export function load() {
throw error(404, '/not-found whatever you want');
}

也创建:src/routes/[...path]/+error.svelte包含(例如):

<script>
import { page } from '$app/stores';
</script>
<div>
<h1>It seems there has been an error, sorry about that.</h1>
{#if $page?.error}
<div class="mt-4 p-4 border-y-2">
{#if $page?.status}
<p>Page status: {$page?.status}</p>
{/if}
{#if $page?.error?.message}
<p>Error message: {$page?.error?.message}</p>
{/if}
</div>
{/if}
</div>

顺便说一句，也许你在布局中有一些样式，甚至布局组所以一定要在相同的目录下放置一个布局文件来应用它们，例如:

src/routes/[...path]/+layout.svelte

相关内容

最新更新

热门标签：