第一段引用上面的摘要：
本文旨在解决 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 ( {children} {auth} );}
此时，访问任何路由都可能导致 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.jsxapp/@auth/default.jsx
在 @auth/login 目录下创建 page.jsx 和 default.jsx 文件：
app/@auth/login/page.jsxapp/@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 ;};export default Login;
那么，你需要确保 @auth/login/default.jsx 存在，并返回一个默认的占位符：
const LoginDefault = () => { return 登录弹窗占位符;};export default LoginDefault;
注意事项：
确保所有必要的 page.jsx 和 default.jsx 文件都已创建，并且路径正确。如果你的插槽路由包含更深层次的子目录，也需要在这些子目录中添加 page.jsx 和 default.jsx 文件。根据你的应用需求，可以修改 page.jsx 和 default.jsx 文件返回的内容。
总结：
通过在并行路由插槽对应的目录及其子目录中添加 page.jsx 和 default.jsx 文件，可以解决 Next.js 中根布局接收插槽作为属性导致路由失效的问题。这种方法确保 Next.js 能够正确解析路由，并允许你利用并行路由的强大功能构建复杂且模块化的应用。请务必仔细检查文件路径和内容，以确保问题得到有效解决。
以上就是Next.js 并行路由与根布局插槽属性冲突问题解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515841.html
微信扫一扫 
支付宝扫一扫 
