第一段引用上面的摘要：
本文档旨在解决 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 文件。
在 page.jsx 和 default.jsx 文件中返回 null。
由于您只想通过路由 /login 访问 LoginPopup 组件，因此可以在 page.jsx 和 default.jsx 文件中返回 null，表示不渲染任何内容。
// app/@auth/page.jsxconst AuthPage = () => { return null;};export default AuthPage;
// app/@auth/default.jsxconst AuthDefault = () => { return null;};export default AuthDefault;
// app/@auth/login/page.jsximport LoginPopup from "@/components/Popups/LoginPopup/LoginPopup";const Login = () => { return ;};export default Login;
// app/@auth/login/default.jsxconst 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 (
示例代码
以下是一个完整的示例，展示了如何使用并行路由和插槽来创建一个上下文模态框：
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 并行路由与根布局插槽冲突问题解决的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515785.html
微信扫一扫 
支付宝扫一扫 
