Sapper 重新加载 [slug] 页面没有 html，页面上只有 json答案

【问题标题】：Sapper reloading [slug] page no html, only json on pageSapper 重新加载 [slug] 页面没有 html，页面上只有 json
【发布时间】：2020-12-13 19:21:00
【问题描述】：

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

我在 sapper 中创建了一个作者网站，该网站在主页上列出了作者的书籍，然后是从书籍项目链接的书籍特定页面 - 书籍页面位于 books/[slug].svelte（和 books/[slug].js 用于服务器边。）

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

如果我重新加载，或者直接输入图书 url，则没有 html：页面显示图书项目的 json。检查器只显示一个用 json 填充的 pre 标记。

该站点的样式非常类似于从 degit 汇总模板创建的演示站点（并从中进行了修改。）

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

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

【问题讨论】：

标签： javascript svelte sapper

【解决方案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 返回 HTML 页面，/books/slug-goes-here.json 返回该页面的 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>

【讨论】：

哇哦！！做到了。我在示例中看到了该命名，但并没有完全点击。谢谢。
实际上，我还有一个问题：假设我想要一个与根 /src/routes/index.svelte 文件平行的服务器 .js 文件。据推测，这将被命名为/src/routes/index.json.js，对吧？我尝试过，但我似乎无法从index.svelte 文件中引用它——我尝试过fetch('json'), fetch('/json'), fetch('json.js') 等，但它总是返回“404”。有没有办法做到这一点？我当前的解决方案是将 .js 文件移到“books”文件夹中，然后我可以将其引用为books.json。这可行，但似乎不是最佳选择。
哎呀——没关系。我明白了：fetch('index.json')。前进。