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

Posted 2023-03-06

【中文标题】如何在不更改当前 URL 的情况下显示错误页面

【英文标题】：How to show error page without changing current URL

【发布时间】：2022-01-08 17:13:54

【问题描述】：

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

【问题讨论】：

我可以给你一点提示，比如当你收到错误时，创建一个像 enableErrorPage 这样的全局布尔标志，然后在所有现有页面中使用这个标志来导入/包含你的500.tsx 组件。如果enableErrorPage == true 渲染500.tsx

这听起来像是工作建议，但不会被视为不好的做法吗？

因此，为了更好的方式，您也可以在路由的 JSON 中执行此逻辑，但您只需要变通并使其集中。

实际上并没有得到你的意思

【参考方案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

【讨论】：

如果客户端请求失败怎么办？我想在 axios 捕获 500 状态错误时显示 500 页

请原谅我草率下结论。我重新阅读了这个问题并相应地调整了我的答案。