刷新动态路由时出现 Sevltekit 404 错误答案

【问题标题】：Sevltekit 404 error when refreshing dynamic route刷新动态路由时出现 Sevltekit 404 错误
【发布时间】：2021-10-12 12:43:24
【问题描述】：

我想要一个基于 URL 动态加载内容的静态页面，例如： https://example.com/pokemon/id

它可以像单页应用程序一样加载到服务器或客户端。

svelte.config.js

import adapter from '@sveltejs/adapter-static';

    export default {
        kit: {
            adapter: adapter({
                pages: 'build',
                assets: 'build',
                fallback: null
            }),
        }
    };

[id].svelte

<script context="module">
export const hydrate = false;
    import { getPokemonById } from "../../stores/pokestore";
    export async function load(ctx) {
        let id = ctx.page.params.id;
        const pokeman = await getPokemonById(id);
        return { props: { pokeman }}
    }
</script>
<script>
    export let pokeman;
    const type = pokeman.types[0].type.name;
</script>
<svelte:head>
    <title>Pokedex - {pokeman.name}</title>
</svelte:head>

<div class="flex flex-col items-center">
    <h1 class="text-4xl text-center my-8 uppercase">{pokeman.name}</h1>
    <p>Type: <strong>{type}</strong> | Height: <strong>{pokeman.height}</strong>
        | Weight: <strong>{pokeman.weight}</strong>
    </p>
    <img class="card-image" src={pokeman.sprites['front_default']} 
    alt={pokeman.name}
    />
</div>

如果进入主页并单击链接，则可以正常工作：

<a href={`/pokeman/${pokeman.id}`}><h2>{pokeman.name}</h2></a>

但如果我刷新此页面，我会收到错误 404，因为此页面不存在。

我无法在构建期间生成所有子页面，因为它们是动态的。

我在 Firebase 主机上托管此网站。

【问题讨论】：

如果您有答案，请将其发布在答案部分并在 2 天内将其标记为正确

标签： svelte sveltekit

【解决方案1】：

这很可能是重定向问题。

当您从主页单击链接时，您实际上并没有'转到'到该页面，sveltekit 会更改 url 但您仍停留在同一页面上，您可以通过单击“打开方式”看到这一点新标签”。

这里发生的情况是，当您直接转到该页面时，您的服务器找不到该页面，因此是 404 页面。您需要设置一个重定向系统，将您的所有页面重新路由回根页面（sveltekit 路由将从那里获取它）。

如何设置取决于您的主机

【讨论】：

【解决方案2】：

Discord 上的 Svelte 社区帮助我解决了我的问题。

因为我在 Firebase 主机上托管网站，所以我必须在 firebase.json 中添加重写规则，如下所示：

"hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },

【讨论】：