如何在 SvelteKit 中添加自定义 404 页面和不同的错误页面（针对其他错误）？

Question

基本上，如何做 ff. 在 SvelteKit 中：

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

Answer 1

阅读更新的文档后，我发现了这一点：

\n

\n

如果期间发生错误load，SvelteKit 将呈现默认错误\n页面。您可以通过添加文件来按路由自定义此错误页面+error.svelte：

\n

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

\n

SvelteKit 将“沿着树向上走”寻找最接近的错误边界 \xe2\x80\x94 如果上面的文件不存在，它会在渲染默认错误页面之前src/routes/blog/+error.svelte尝试\n。src/routes/+error.svelte

\n

\n

当然，这是您自己的错误页面组件，因此您可以根据需要对其进行修改。

\n

过时的解决方案：

\n

如果您的代码中有以下内容，请将其更新为文档中找到的更新解决方案（如上所示）。

\n

\n
1. 在您的路由文件夹中创建一个__error.svelte文件。
\n
2. 在该文件中，您可以按照文档中所示执行此操作：
\n

\n

\n

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

\n

\n

\n
3. 我们还没有完成！您可以检查状态代码，然后渲染不同的屏幕组件。（顺便说一句，您可以配置函数props内部）：load
\n

\n

\n

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

\n

\n

\n
4. 你已经准备好了！#if status == 404您可以通过将 更改为 like来测试它#if status == 500，看看是否一切正常。（不要忘记将其改回404）。
\n

\n

Answer 2

2022 年 12 月解决方案

根据文档：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