如何在不更改当前 URL 的情况下显示错误页面

Question

我有一个名为 500.tsx 的自定义 500 错误页面，我希望能够在来自客户端的请求失败且状态为 500 时显示此页面，但将客户端保留在旧 url 上（例如 /auth/register）。我有一个axios 错误侦听器，它应该可以完成所有工作。但是找不到使用next/router 的方法。任何帮助表示赞赏

Answer 1

起初没有意识到 OP 想要显示 500 页。

您可以查看router.isFallback，但我不完全确定这是否适合。 它应该用于页面加载指示器，但在你的情况下，由于页面永远不会加载，它可以工作。

https://nextjs.org/docs/basic-features/data-fetching#fallback-true

 return router?.isFallback 
   ? <Custom500Page/>
   : <RegularPage/>

您可以通过getStaticPaths 方法设置此变量，该方法在构建期间运行，通常用于[slug] 页面。

// This function gets called at build time
export async function getStaticPaths() {
  // Fetch paths to your slug pages here

  return {
    // paths,
    fallback: true
  }
}

显示 404 页面非常简单，我们就是这样做的。

渲染 404 页面

您可以从getStaticProps 方法有条件地将名为notFound 的变量导出为true。

如果 URL 无效并且您没有数据来呈现页面，您只需将该 notFound 属性作为 true 传递，然后默认或自定义 404 页面将自动显示并保留您的无效 URL。

// This function gets called at build time
export async function getStaticProps({ params, preview = false }) {
  let pageData

  try {
    // fetch pageData from API here
  } catch (error) {
    // catch errors
  }

  // check validity or emptyness of data
  // invalid URL (slug) -> empty data from API
  // valid URL (slug) -> valid data from API

  return isObjectEmpty(pageData)
    ? { notFound: true }
    : {
        props: {
          pageData
          // pass other props to the page
        }
      }
}

getStaticProps 和 not-found 上的 NextJS 文档

https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation