使用 Sapper，如何在出现 404 错误时重定向到索引页面？答案

【问题标题】：Using Sapper, how can I redirect to the index page on a 404 error?使用 Sapper，如何在出现 404 错误时重定向到索引页面？
【发布时间】：2020-02-18 02:42:58
【问题描述】：

在出现 404 错误时，我不想显示 404 页面。相反，如果用户已登录，我想重定向回索引页面，如果用户已注销，我想重定向回登录页面。如果未登录，我已经能够将用户从索引页面路由到登录页面，所以我可能只需要重定向到索引页面并让它负责重新路由到登录页面，尽管那必须进行两次重新路由似乎效率低下。

我可以通过将routes/_error.svelte 页面重写到这个来完成它...

<script>
    import { onMount } from 'svelte';
    onMount(() => {window.location.href = '/'});
</script>

但我不太相信这是完成我想做的事情的最佳方式。它还重定向所有错误，在未来的项目中，我可能希望显示某些错误，例如 404，但重定向其他错误，例如 500。

是否有人对如何使用 Sapper 更好地实现这一点有一些见解？

【问题讨论】：

根据 Sapper 文档，error 对象和 HTTP status 都可用于 _error.svelte 模板。因此，您可以选择仅在 status === 404 时重定向，并为其他状态代码显示各种内容。参考这里：sapper.svelte.dev/docs#Error_page
你认为重定向应该在_error.svelte模板中使用onMount方法处理，还是在服务器端有不同的方式来完成？
我在您的解决方案中看到的唯一负面影响是在重定向发生之前有一个“中间”渲染。理想情况下，您可能希望在 server.js 中处理该重定向，但是您必须找到一种方法来区分现有路由（要传递给 sapper 中间件）和不存在的路由（要重定向）。或者也许可以使用_error.js 服务器路由而不是_error.svelte 客户端路由来处理错误？没试过，但可能值得研究。

标签： javascript svelte sapper

【解决方案1】：

你应该试试goto函数。

import { goto } from '@sapper/app';
goto('your/path');

如果你想在 onMount 钩子中做，它应该是：

<script>
    import { onMount } from 'svelte';
    import { goto } from '@sapper/app';
    onMount(() => goto('your/path'));
</script>

在您非常具体的情况下，如果您想根据_error.svelte 页面上的错误标准执行此操作，您应该根据错误选择路径：

<script>
    import { onMount } from 'svelte';
    import { goto } from '@sapper/app';
    onMount(() => goto(
      error.status === 500
        ? 'path1'
        : error.status === 404
        ? 'path2'
        : 'path3'
    ));
</script>

原始 GitHub 问题here

【讨论】：

这确实有效，但似乎仍然不太理想。最终，如果 Sapper 能够进行服务器端重定向，那就太好了，因为这种方法仍然需要两次重定向才能工作，一次到 _error 页面，然后一次到重定向页面。如果我在 _error 页面上有任何 HTML，它也会在重定向之前闪烁。我向 Sapper Github 提交了 PR #960 和 #962，这将允许服务器端重定向。希望这样的事情得到实施。
你在preload里面试过sapper.svelte.dev/docs#Contextthis.redirect(statusCode, location)吗？
我做到了。如果我把它放在_error.svelte 文件中，它似乎不起作用。
我也在尝试“如果没有文件或路由重定向到家”——我买了一个旧域，当机器人爬行时，谷歌给出了很多 404。

【解决方案2】：

您还可以使用 HTML 元标记进行重定向。像这样在routes/_error.svelte 上使用它：

<svelte:head>
    <meta http-equiv="refresh" content="0; URL=./index" />
</svelte:head>

【讨论】：