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

第一段引用上面的摘要：

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

问题分析

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

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

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

解决方案

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

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

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

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

   

   陌言AI

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

   下载

2. 在 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 ;
   };
   
   export default Login;

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

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

   您的根布局 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 (
       
         
           
   
           {children}
           {auth}
           

示例代码

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

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。