5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置

5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置

配置捕获所有段

配置捕获所有段

动态段可以通过在方括号内添加省略号来扩展,以捕获所有后续段:[...folderName]

比如我们要访问这个路由/blog/a/b/c,可以将目录名称从[slug]更改成[...slug],页面params 的类型也设置为数组:

//app/blog/[...slug]/page.tsx
export default function Page({ params }: { params: { slug: string[] } }{
    console.log(params)
    return <div>My Post: {params.slug}</div>
}

我们终端打印出来的值:5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置

访问效果:5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置

通常情况下,为了显示/blog/a/b/c上的页面,需要在[slug]目录下面创建[userId],并在其下创建[categoryId],然后在下创建page.tsx文件,可以为 useIdcatagoryId 指定任何您喜欢的名称,但请确保它们与 sluguserIdcategoryId 不同。

//app/blog/[slug]/[userId]/[categoryId]/page.tsx
export default function Page({ params }: { params: { slug: string,userId:string,categoryId:string } }{
    console.log(params)
    return <div>
        <p>slug:{params.slug}</p>
        <p>userId:{params.userId}</p>
        <p>categoryId:{params.categoryId}</p>
    </div>

}

终端打印:5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置

访问blog/a/b/c:5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置

可选的捕获所有段

通过在双方括号内包含参数,可以将捕获所有段设置为可选的:[[...folderName]]

例如,app/shop/[[...slug]]/page.js 也将匹配 /shop,除了匹配 /shop/clothes/shop/clothes/tops/shop/clothes/tops/t-shirts

可选捕获所有段与捕获所有段的区别在于,对于可选的情况下,也会匹配不包含该参数的路由(在上面的示例中为 /shop)。

路由 示例 URL 参数

  • app/shop/[[…slug]]/page.js /shop    {}
  • app/shop/[[…slug]]/page.js /shop/a { slug: [‘a’] }
  • app/shop/[[…slug]]/page.js /shop/a/b { slug: [‘a’, ‘b’] }
  • app/shop/[[…slug]]/page.js /shop/a/b/c { slug: [‘a’, ‘b’, ‘c’] }

配置并行路由

通过使用并行路由,可以在一个布局中显示多个页面组件。

我们在app目录下创建两个目录:@analytics和@team,在每个目录下创建一个page.tsx文件。

//app/@analytics/page.tsx

export default function Page({
    return (
        <div className="m-4">
            <h1 className="text-2xl">Analytics</h1>
        </div>

    )
}
//app/@team/page.tsx

export default function Page({
    return (
        <div className="m-4">
            <h1 className="text-2xl">Team</h1>
        </div>

    )
}

在app目录下的layout.tsx文件中添加

//app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title'Create Next App',
  description'Generated by create next app',
}

export default function RootLayout({
    children,
    team,
    analytics
}: {
    children: React.ReactNode
    team: React.ReactNode
    analytics: React.ReactNode
}
{
  return (
    <html lang="en">
      <body className={inter.className}>
      <div>{children}</div>
      <div>{team}</div>
      <div>{analytics}</div>
      </body>
    </html>

  )
}

设置完成之后,我们来访问首页/,浏览器上会显示@analytics和@team的children和page.tsx文件对应的app/page.tsx的内容。

我们users目录下面有layout.tsx文件,可以先删除。

5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置
image.png

重新加载时,Next.js 将首先尝试渲染不匹配插槽的default.js文件。如果不可用,则会呈现 404。为了防止404页面的显示,需要在@analytics、@team目录下创建default.tsx文件。

//app/@analytics/default.tsx
export default function Default({
    return <div className="m-4">Analytics Page</div>;
}
//app/@team/default.tsx
export default function Default({
    return <div className="m-4">Team Page</div>;
}

创建default.tsx文件后,如果重新加载/users页面,就会显示default.tsx文件中写入的内容。

5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置
image.png

配置default.tsx文件后,我们可以导入对应目录的Page

//app/@analytics/default.tsx
import Page from "./page";
export default function Default({
    return <Page/>
}
//app/@team/default.tsx
import Page from "./page";
export default function Default({
    return <Page/>
}

现在,从/导航到 /users页面时,会显示相同的内容。

关注我一起来学习Next.js14吧!


原文始发于微信公众号(大前端编程教学):5.Next.js14 配置捕获所有段和配置并行路由以及default.js配置

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/224404.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!