Next.js 并行路由与根布局插槽冲突问题解决-js教程-PHP中文网

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

碧海醫心

发布： 2025-08-17 17:26:18

原创

402人浏览过

next.js 并行路由与根布局插槽冲突问题解决

第一段引用上面的摘要：

本文档旨在解决 Next.js 中使用并行路由时，将插槽作为根布局的 prop 传递导致路由失效的问题。通过分析问题原因，并提供一种有效的解决方案，帮助开发者在 Next.js 项目中正确使用并行路由和插槽，实现上下文模态框等高级功能。

问题分析

在 Next.js 中，并行路由允许您在同一个布局中同时渲染多个独立的页面或组件。这对于创建模态框、侧边栏等需要覆盖部分页面的 UI 非常有用。然而，当您尝试将并行路由的插槽（slot）作为根布局的 prop 传递时，可能会遇到路由失效的问题，导致所有路由都返回 404 错误。

这个问题通常发生在以下场景：

您定义了一个插槽，例如 @auth，用于处理身份验证相关的 UI。
您在根布局 app/layout.jsx 中接收该插槽作为 prop，并将其渲染在 children 组件旁边。
当您访问任何路由时，都会收到 404 错误。

解决方案

问题的根源在于 Next.js 需要每个并行路由插槽都包含 page.jsx (或 page.tsx) 和 default.jsx (或 default.tsx) 文件。即使您不打算在特定路由下渲染任何内容，也需要提供这些文件。

以下是解决此问题的步骤：

在每个插槽目录中创建 page.jsx 和 default.jsx 文件。

对于 @auth 插槽，您需要在 app/@auth 目录下创建 page.jsx 和 default.jsx 文件。对于 @auth/login 插槽，您需要在 app/@auth/login 目录下创建 page.jsx 和 default.jsx 文件。

吐槽大师
吐槽大师（Roast Master） - 终极 AI 吐槽生成器，适用于 Instagram，Facebook，Twitter，Threads 和 Linkedin

26

查看详情

在 page.jsx 和 default.jsx 文件中返回 null。

由于您只想通过路由 /login 访问 LoginPopup 组件，因此可以在 page.jsx 和 default.jsx 文件中返回 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
import LoginPopup from "@/components/Popups/LoginPopup/LoginPopup";

const Login = () => {
  return <LoginPopup />;
};

export default Login;

登录后复制

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

export default LoginDefault;

登录后复制

确保根布局正确渲染插槽。

您的根布局 app/layout.jsx 应该正确地接收和渲染 auth 插槽。

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 (
    <html lang="ru">
      <body className="font-text" suppressHydrationWarning={true}>
        <Header />
        {children}
        {auth}
        <Footer />
      </body>
    </html>
  );
}

登录后复制

示例代码

以下是一个完整的示例，展示了如何使用并行路由和插槽来创建一个上下文模态框：

app/
├── @auth/
│   ├── login/
│   │   ├── page.jsx
│   │   └── default.jsx
│   ├── page.jsx
│   └── default.jsx
├── layout.jsx
└── page.jsx

登录后复制

注意事项

确保您的 Next.js 版本支持并行路由功能。
仔细检查您的目录结构和文件命名，确保它们符合 Next.js 的规范。
如果问题仍然存在，请尝试清除 Next.js 的缓存并重新启动开发服务器。

总结

通过在每个并行路由插槽中创建 page.jsx 和 default.jsx 文件，并确保根布局正确渲染插槽，您可以解决 Next.js 中并行路由与根布局插槽冲突的问题。这将允许您在 Next.js 项目中有效地使用并行路由和插槽，构建更复杂和灵活的 UI。记住，即使插槽不需要渲染任何内容，也需要提供 page.jsx 和 default.jsx 文件并返回 null。

以上就是Next.js 并行路由与根布局插槽冲突问题解决的详细内容，更多请关注php中文网其它相关文章！