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.jsxconst AuthPage = () => { return null;};export default AuthPage;
步骤 2: 创建 app/@auth/default.jsx
// app/@auth/default.jsxconst AuthDefault = () => { return null;};export default AuthDefault;
步骤 3: 创建 app/@auth/login/page.jsx
// app/@auth/login/page.jsxconst LoginPage = () => { return null;};export default LoginPage;
步骤 4: 创建 app/@auth/login/default.jsx
// app/@auth/login/default.jsxconst 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 (
LoginPopup 组件 (位于 components/Popups/LoginPopup/LoginPopup.jsx)：
// components/Popups/LoginPopup/LoginPopup.jsxconst LoginPopup = () => { return ( {/* 登录弹窗内容 */} Login Popup
This is a login popup.
);};export default LoginPopup;
app/@auth/login/page.jsx (展示 LoginPopup 组件)：
// app/@auth/login/page.jsximport 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 路由机制的正常运行，并允许开发者充分利用并行路由的优势，构建更加灵活和可维护的应用程序。
以上就是Next.js 并行路由与根布局插槽属性冲突问题解决的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515843.html
微信扫一扫 
支付宝扫一扫 
