SvelteKit中路由渲染后如何手动展示404错误页面？

针对流式数据加载或客户端懒加载数据的场景，无法在load()执行完成后通过throw error(404)触发404页面的问题，可以通过以下核心方案解决：

一、客户端懒加载数据场景 #

在页面组件（+page.svelte）中完成数据加载后，根据结果判断是否触发404，有两种实现方式：

方式1：调用SvelteKit内置的error函数 #

直接调用error(404)会触发框架的错误处理流程，自动渲染你的+error.svelte页面（若已定义）：

<script lang="ts">
  import { onMount } from 'svelte';
  import { error } from '@sveltejs/kit';

  let resourceData: any;

  onMount(async () => {
    // 模拟客户端异步加载数据
    const res = await fetch('/api/target-resource');
    resourceData = await res.json();

    // 数据不存在时触发404
    if (!resourceData || resourceData.status === 'not_found') {
      error(404, '请求的页面不存在');
    }
  });
</script>

{#if resourceData}
  <!-- 正常渲染业务内容 -->
  <div class="content">{resourceData.content}</div>
{/if}

方式2：手动导航到404页面 #

如果需要直接跳转到自定义的404路由页面，使用goto函数：

<script lang="ts">
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';

  let resourceData: any;

  onMount(async () => {
    const res = await fetch('/api/target-resource');
    resourceData = await res.json();

    if (!resourceData) {
      // 跳转到已定义的/404路由
      await goto('/404');
    }
  });
</script>

{#if resourceData}
  <div class="content">{resourceData.content}</div>
{/if}

二、流式数据加载场景 #

若load()返回流式数据，可在客户端消费流的过程中检测数据有效性，一旦触发404条件就终止流并调用error函数：

步骤1：在+page.ts中返回流式数据 #

import type { PageLoad } from './$types';

export const load: PageLoad = async () => {
  // 获取流式响应
  const streamRes = await fetch('/api/stream-resource');
  return { stream: streamRes.body };
};

步骤2：在页面组件中处理流并触发404 #

<script lang="ts">
  import { error } from '@sveltejs/kit';
  export let data: { stream: ReadableStream | null };

  let streamContent = '';

  async function processStream() {
    if (!data.stream) return;

    const reader = data.stream.getReader();
    const decoder = new TextDecoder();

    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        streamContent += decoder.decode(value, { stream: true });

        // 检测流式数据中的404标识（根据实际业务调整判断逻辑）
        if (streamContent.includes('ERROR:NOT_FOUND')) {
          error(404, '请求的资源不存在');
          reader.cancel(); // 终止流读取，避免资源浪费
          break;
        }
      }
    } catch (err) {
      console.error('流处理异常:', err);
      error(500, '服务器内部错误');
    }
  }

  processStream();
</script>

{#if streamContent}
  <div class="stream-content">{streamContent}</div>
{/if}

注意事项 #

• 确保已在项目中定义+error.svelte文件，否则框架会使用默认错误页面
• 使用goto('/404')时，需提前在routes/404目录下创建对应的+page.svelte页面
• 流式场景中，触发404后务必调用reader.cancel()终止流，避免不必要的资源占用

内容的提问来源于stack exchange，提问作者farincz