第一段引用上面的摘要：
本文旨在解决 Next.js 中使用并行路由时，根布局接收插槽作为属性导致路由失效的问题。通过分析问题原因，提供一种有效的解决方案，即在插槽路由中添加 page.jsx 和 default.jsx 文件，并确保它们返回 null 或适当的默认内容，从而避免路由冲突，实现预期的并行路由效果。
Next.js 并行路由与插槽属性冲突
在使用 Next.js 构建复杂应用时，并行路由 (Parallel Routing) 是一种强大的特性，它允许你在同一布局中同时渲染多个独立的页面或组件。然而，当尝试将并行路由的插槽 (Slot) 作为属性传递给根布局时，可能会遇到路由失效的问题，导致所有路由都返回 404 错误。
问题描述：
在 app 目录下，你可能定义了一个名为 @auth 的插槽，并在根布局 app/layout.jsx 中尝试接收 auth 插槽作为属性：
export default function RootLayout({ children, auth }) { return ( <html lang="ru"> <body> {children} {auth} </body> </html> ); }
此时，访问任何路由都可能导致 404 错误。
问题原因：
虽然 Next.js 官方文档没有明确说明，但问题的根源在于 Next.js 的路由机制对于并行路由插槽的处理方式。当根布局接收插槽作为属性时，Next.js 期望在插槽对应的目录及其子目录中找到 page.jsx 和 default.jsx 文件。如果缺少这些文件，Next.js 可能会无法正确解析路由，从而导致路由失效。
解决方案：
解决此问题的关键是在插槽对应的目录及其子目录中添加 page.jsx 和 default.jsx 文件。即使你不需要在这些文件中渲染任何内容，也需要创建它们并确保它们返回 null 或适当的默认内容。
具体步骤：
-
在 @auth 目录下创建 page.jsx 和 default.jsx 文件：
app/@auth/page.jsx app/@auth/default.jsx
-
在 @auth/login 目录下创建 page.jsx 和 default.jsx 文件：
app/@auth/login/page.jsx app/@auth/login/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 的内容可以是：
const LoginPage = () => { return null; }; export default LoginPage;app/@auth/login/default.jsx 的内容可以是：
const LoginDefault = () => { return null; }; export default LoginDefault;或者，如果需要显示一些默认内容，例如一个占位符，可以修改这些文件返回对应的 React 组件。
示例代码：
假设你的 @auth/login/page.jsx 包含以下内容，用于渲染登录弹窗：
import LoginPopup from "@/components/Popups/LoginPopup/LoginPopup"; const Login = () => { return <LoginPopup />; }; export default Login;
那么，你需要确保 @auth/login/default.jsx 存在，并返回一个默认的占位符：
const LoginDefault = () => { return <div>登录弹窗占位符</div>; }; export default LoginDefault;
注意事项：
- 确保所有必要的 page.jsx 和 default.jsx 文件都已创建，并且路径正确。
- 如果你的插槽路由包含更深层次的子目录，也需要在这些子目录中添加 page.jsx 和 default.jsx 文件。
- 根据你的应用需求，可以修改 page.jsx 和 default.jsx 文件返回的内容。
总结：
通过在并行路由插槽对应的目录及其子目录中添加 page.jsx 和 default.jsx 文件，可以解决 Next.js 中根布局接收插槽作为属性导致路由失效的问题。这种方法确保 Next.js 能够正确解析路由，并允许你利用并行路由的强大功能构建复杂且模块化的应用。请务必仔细检查文件路径和内容，以确保问题得到有效解决。
评论（已关闭）
评论已关闭