Next.js中如何不更改当前URL即可展示自定义500错误页面？

next/router 提供的路由跳转方法（push/replace）都会修改地址栏URL，无法直接通过路由跳转实现「保留原有URL展示500页」的需求，推荐用状态控制渲染的方案实现，具体步骤如下：

方案1：全局500错误拦截（适合全站点统一处理） #

• 首先把你的500.tsx封装成可复用的组件，默认导出该组件
• 新增全局状态管理（可选React Context、Zustand、Redux等任意状态工具），声明两个状态：
  • isShow500: boolean：控制是否展示500页面
  • errorInfo?: string：可选，存储错误详情用于展示
• 根布局组件中添加渲染判断：
  • 如果你用的是App Router，修改app/layout.tsx：如果isShow500为true，直接渲染<Error500 />组件，否则渲染页面子内容
  • 如果你用的是Pages Router，修改pages/_app.tsx：同上逻辑
• 在你已经配置好的axios错误监听器中添加逻辑：如果接口响应状态码为500，直接把isShow500设为true即可

该方案完全不会修改地址栏URL，用户看到500页时地址栏仍然是原页面地址，符合需求。如果需要支持用户返回原页面，在500组件中添加「返回重试」按钮，点击后把isShow500重置为false即可。

方案2：单页面单独处理（适合仅部分页面需要该逻辑） #

如果不需要全站点统一拦截500错误，仅需要在特定页面（比如你的示例/auth/register）处理，可以直接在对应页面组件内加本地状态：

• 在页面组件内声明状态 const [show500, setShow500] = useState(false)
• 在当前页面发起的axios请求的异常捕获逻辑中，判断状态码为500时调用setShow500(true)
• 页面组件渲染逻辑判断：如果show500为true渲染<Error500 />，否则渲染原有页面内容

内容的提问来源于stack exchange，提问作者howard wolowitz