Next.js 并行路由与根布局插槽属性冲突问题解决方案

第一段引用上面的摘要：

本文旨在解决 Next.js 中使用并行路由时，根布局接收插槽作为属性导致路由失效的问题。通过分析问题原因，提供一种有效的解决方案，即在插槽路由中添加 page.jsx 和 default.jsx 文件，并确保它们返回 null 或适当的默认内容，从而避免路由冲突，实现预期的并行路由效果。

Next.js 并行路由与插槽属性冲突

在使用 Next.js 构建复杂应用时，并行路由 (Parallel Routing) 是一种强大的特性，它允许你在同一布局中同时渲染多个独立的页面或组件。然而，当尝试将并行路由的插槽 (Slot) 作为属性传递给根布局时，可能会遇到路由失效的问题，导致所有路由都返回 404 错误。

问题描述：

在 app 目录下，你可能定义了一个名为 @auth 的插槽，并在根布局 app/layout.jsx 中尝试接收 auth 插槽作为属性：

export default function RootLayout({ children, auth }) {
  return (
    
      
        {children}
        {auth}
      
    
  );
}

此时，访问任何路由都可能导致 404 错误。

问题原因：

虽然 Next.js 官方文档没有明确说明，但问题的根源在于 Next.js 的路由机制对于并行路由插槽的处理方式。当根布局接收插槽作为属性时，Next.js 期望在插槽对应的目录及其子目录中找到 page.jsx 和 default.jsx 文件。如果缺少这些文件，Next.js 可能会无法正确解析路由，从而导致路由失效。

解决方案：

解决此问题的关键是在插槽对应的目录及其子目录中添加 page.jsx 和 default.jsx 文件。即使你不需要在这些文件中渲染任何内容，也需要创建它们并确保它们返回 null 或适当的默认内容。

具体步骤：

1. 在 @auth 目录下创建 page.jsx 和 default.jsx 文件：

   app/@auth/page.jsx
   app/@auth/default.jsx

2. 在 @auth/login 目录下创建 page.jsx 和 default.jsx 文件：

   

   如此AI员工

   国内首个全链路营销获客AI Agent

   下载

   app/@auth/login/page.jsx
   app/@auth/login/default.jsx

3. 确保这些文件返回 null 或适当的默认内容：

   例如，app/@auth/page.jsx 的内容可以是：

   const AuthPage = () => {
     return null;
   };
   
   export default AuthPage;

   app/@auth/default.jsx 的内容可以是：

   const AuthDefault = () => {
     return null;
   };
   
   export default AuthDefault;

   app/@auth/login/page.jsx 的内容可以是：

   const LoginPage = () => {
     return null;
   };
   
   export default LoginPage;

   app/@auth/login/default.jsx 的内容可以是：

   const LoginDefault = () => {
     return null;
   };
   
   export default LoginDefault;

   或者，如果需要显示一些默认内容，例如一个占位符，可以修改这些文件返回对应的 React 组件。

示例代码：

假设你的 @auth/login/page.jsx 包含以下内容，用于渲染登录弹窗：

import LoginPopup from "@/components/Popups/LoginPopup/LoginPopup";

const Login = () => {
  return ;
};

export default Login;

那么，你需要确保 @auth/login/default.jsx 存在，并返回一个默认的占位符：

const LoginDefault = () => {
  return 
登录弹窗占位符
;
};

export default LoginDefault;

注意事项：

• 确保所有必要的 page.jsx 和 default.jsx 文件都已创建，并且路径正确。
• 如果你的插槽路由包含更深层次的子目录，也需要在这些子目录中添加 page.jsx 和 default.jsx 文件。
• 根据你的应用需求，可以修改 page.jsx 和 default.jsx 文件返回的内容。

总结：

通过在并行路由插槽对应的目录及其子目录中添加 page.jsx 和 default.jsx 文件，可以解决 Next.js 中根布局接收插槽作为属性导致路由失效的问题。这种方法确保 Next.js 能够正确解析路由，并允许你利用并行路由的强大功能构建复杂且模块化的应用。请务必仔细检查文件路径和内容，以确保问题得到有效解决。