Next.js 中使用并行路由时，将插槽 (slot) 作为属性传递给根布局 (RootLayout) 导致路由失效的问题，可以通过在插槽路由及其子路由中添加返回 null 的 page.jsx 和 default.jsx 文件来解决。

问题描述

在使用 Next.js 的并行路由功能时，开发者尝试将一个名为 @auth 的插槽作为属性传递给根布局 app/layout.jsx。期望实现一个上下文相关的模态框，并通过访问 /login 路由来触发显示，同时保持背景页面的状态。然而，当将 auth 插槽作为属性传递给 RootLayout 时，所有路由都会失效，返回 404 错误。移除 auth 属性后，路由恢复正常。

问题原因

虽然 Next.js 官方文档中没有明确说明，但该问题的原因在于并行路由的插槽路由中缺少必要的 page.jsx 和 default.jsx 文件。Next.js 的路由机制要求所有路由路径都必须对应一个 page.jsx 文件，即使该页面不需要渲染任何内容。而 default.jsx 文件则用于在没有匹配到特定插槽路由时提供一个默认的 UI。

解决方案

解决该问题的方法是在 @auth 插槽路由及其子路由（例如 @auth/login）中添加 page.jsx 和 default.jsx 文件，并让它们返回 null。

步骤 1: 创建 app/@auth/page.jsx

// app/@auth/page.jsx
const AuthPage = () => {
  return null;
};

export default AuthPage;

步骤 2: 创建 app/@auth/default.jsx

// app/@auth/default.jsx
const AuthDefault = () => {
  return null;
};

export default AuthDefault;

步骤 3: 创建 app/@auth/login/page.jsx

// app/@auth/login/page.jsx
const LoginPage = () => {
  return null;
};

export default LoginPage;

步骤 4: 创建 app/@auth/login/default.jsx

陌言AI

陌言AI是一个一站式AI创作平台，支持在线AI写作，AI对话，AI绘画等功能

下载

// app/@auth/login/default.jsx
const LoginDefault = () => {
  return null;
};

export default LoginDefault;

通过添加这些文件，即使插槽路由没有实际的 UI 内容，Next.js 也能正确地处理路由，从而避免路由失效的问题。

代码示例

下面是根布局 app/layout.jsx 的示例代码：

import Header from "@/components/Header/Header";
import Footer from "@/components/Footer/Footer";
import "./globals.css";

export const metadata = {
  title: "SanSearch",
  description: "Сайт по поиску юридических документов",
};

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

        {children}
        {auth}
        

LoginPopup 组件 (位于 components/Popups/LoginPopup/LoginPopup.jsx)：

// components/Popups/LoginPopup/LoginPopup.jsx
const LoginPopup = () => {
  return (
    

      {/* 登录弹窗内容 */}
      
Login Popup
      
This is a login popup.
    
  );
};

export default LoginPopup;

app/@auth/login/page.jsx (展示 LoginPopup 组件)：

// app/@auth/login/page.jsx
import LoginPopup from "@/components/Popups/LoginPopup/LoginPopup";

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

export default Login;

注意事项

• 确保所有插槽路由及其子路由都包含 page.jsx 和 default.jsx 文件。
• 如果插槽路由需要渲染实际的 UI 内容，则在 page.jsx 文件中返回相应的组件。
• default.jsx 文件可以用于提供默认的 UI，例如显示一个占位符或错误信息。

总结

通过在 Next.js 并行路由的插槽路由中添加 page.jsx 和 default.jsx 文件，可以有效地解决因插槽属性传递给根布局而导致的路由失效问题。这种方法能够确保 Next.js 路由机制的正常运行，并允许开发者充分利用并行路由的优势，构建更加灵活和可维护的应用程序。