Next.js并行路由接收slot props后路由失效问题求助

问题原因 #

你创建的@auth并行路由属于必填并行路由，Next.js要求所有路由路径都必须对应有@auth插槽的内容，当访问非/login路由时，没有匹配的@auth片段，因此返回404。

解决方案 #

方法1：使用可选并行路由（推荐） #

将@auth文件夹重命名为@auth?，这样该插槽变为可选，当没有匹配的auth路由时，auth prop会返回undefined，不会触发404：

• 重命名app目录下的@auth为@auth?
• 保留@auth?/login/page.jsx的代码不变
• 根布局layout.jsx中依然接收auth prop，渲染逻辑保持原样

方法2：给并行路由添加默认页面 #

在@auth目录下创建default.jsx，提供默认空内容，当没有匹配的auth路由时会渲染这个默认页面：

// app/@auth/default.jsx
export default function AuthDefault() {
  return null;
}

弹窗优化建议 #

确保LoginPopup组件采用弹窗样式，比如通过CSS固定定位覆盖页面，保留背后页面的状态：

/* 示例弹窗样式 */
.login-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

这样访问/login时，会同时渲染原页面内容和登录弹窗，关闭弹窗后可以直接回到原页面状态，无需重新加载。

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