Next.js 13 App Router并行路由模态框刷新返回404问题求助

问题原因 #

直接访问/login时，Next.js会尝试匹配独立的/login路由，但项目中仅存在@overlays/login的并行路由组件，主路由无对应页面，因此会渲染404页面，同时加载overlay的模态框内容。

解决方案 #

通过Next.js的重写规则，将/login路径映射到首页/，同时保留原路径，实现既渲染首页内容，又加载对应overlay组件的效果。

步骤1：配置next.config.js #

在项目根目录的next.config.js中添加重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/login',
        destination: '/',
      },
    ];
  },
};

module.exports = nextConfig;

步骤2：验证路由行为 #

• 刷新/login页面时，Next.js会渲染首页内容，同时加载@overlays/login的模态框组件。
• 关闭模态框调用router.back()时，会根据浏览器历史记录返回对应路径（若直接访问/login，则返回浏览器历史的上一页）。

额外注意事项 #

• 确保首页组件（app/page.tsx）无路径相关的隐藏逻辑，保证/login路径下能正常渲染。
• 若需区分是否通过模态框访问首页，可使用usePathname()获取当前路径，判断是否为/login后做对应处理。

内容的提问来源于stack exchange，提问作者Ruelle Paul