Sapper 正在重新加载 [slug] 页数 html，仅页数 json

Question

Sapper 和 Svelte 的新手，使用过其他框架。

我在 sapper 中创建了一个作者网站，在主页上列出了作者的书籍，然后是从书籍项目中 link 编辑的书籍特定页面 - 书籍页面在 books/[slug].svelte（服务器端 books/[slug].js。）

从 link（位于另一个组件）转到书页呈现完美 - 没有问题。

如果我重新加载，或直接输入书 url，则没有 html：页面显示书项的 json。检查器仅显示一个 pre 标记，其中填充了 json.

该站点的模式与从 degit rollup 模板创建的演示站点非常相似（并从中进行了修改。）

知道这里发生了什么吗？我想知道我错过了什么？

想法赞赏。如果需要，我可以提供更多详细信息和 github 存储库。

Answer 1

问题是您有重叠的路线 -- 您的 API 路线和您的页面都位于 /books/slug-goes-here。当您在客户端导航时，Sapper 会换入新的 Svelte 组件，并且不会向服务器请求任何内容。当你直接去那里时，浏览器请求 /books/slug-goes-here 并从你的 API 接收 JSON。

要解决此问题，您应该将服务器路由重命名为 [slug].json.js 并在您的组件中获取 /books/slug-goes-here.json。这样，您有两条不同的路线：/books/slug-goes-here returns HTML 页面和 /books/slug-goes-here.json returns JSON 数据对于那个页面。

<!-- [slug].svelte -->
<script context="module">
    export async function preload({ params }) {
        // this is the component located at books/[slug]
        // it requests books/[slug].json to get its data
        const res = await this.fetch(`books/${params.slug}.json`);
        const data = await res.json();

        // etc
    }
</script>

Sapper 正在重新加载 [slug] 页数 html，仅页数 json

Sapper reloading [slug] page no html, only json on page

javascript

svelte

sapper