_error.page.js

我们定义 renderer/_error.page.tsx 用于在发生错误时渲染页面

// renderer/_error.page.js

export { Page }

function Page(pageProps) {
  if (pageProps.is404) {
    // 返回 UI 组件 "Page Not Found"
  } else {
    // 返回 UI 组件 "Our server is having problems. Sincere apologies. Try again later."
  }
}

我们可以像定义任何其他页面一样定义 hook，例如定义一个 自定义 layout。

预渲染

如果我们启用 预渲染，那么 vite-plugin-ssr 使用 _error.page.js 生成 dist/client/404.html。

大多数静态host会自动选择 404.html 并使用它来渲染 404 页面

详情

页面 _error.page.js 在以下情况下渲染：

1. 我们的页面均不匹配 URL（404 Page Not Found）。
2. 我们的一个 hook（在 .page.js / .page.server.js / .page.route.js 中）抛出一个错误（500 Internal Server Error）。
3. 我们的一个 hook 执行 throw RenderErrorPage()。

对于 1. 和 3.，vite-plugin-ssr 会自动设置以下内容：

• pageContext.is404 === true
• pageContext.pageProps.is404 === true

我们可以 throw RenderErrorPage({ pageContext: { is404: false }}) 来得到 pageContext.is404 === false 以及 pageContext.pageProps.is404 === false。

对于 2.： -pageContext.is404 === false -pageContext.pageProps.is404 === false

通常，vite-plugin-ssr 源码对 pageContext.pageProps 一无所知，但这是唯一的例外

这样，我们可以使用 `pageContext.pageProps.is404`` 来决定向我们的用户显示什么错误消息