next入门之路-4-route

next.js中通过名字来约定路由，具体表现就是文件目录

静态路由

路由定义

• app/ -> /
• app/xxx -> /xxx
• app/x/y/z -> /x/y/z

路由跳转

• Link

  tsx

  <Link
      href={`/x/y/z`}
      >
      查看更多...
  </Link> // 跳到/x/y/z页面

• useRouter(Hook)

  tsx

  'use client'//需要在客户端组件下才能使用
  import { useRouter } from 'next/navigation';
  const Component =（）=>{
      const router = useRouter();
      //router.replace('/');
      //router.push('/');
      return <div></div>
  }

动态路由

路由定义

用[]表示动态的部分，例如不同的id

app/blog/[slug]/page.tsx -> app/blog -> x

app/blog/[slug]/page.tsx -> app/blog/2 -> {slug:2}

app/blog/[slug]/page.tsx -> app/blog/3 -> {slug:3}

app/blog/[…slug]/page.tsx -> app/blog/3/4/5 -> {slug:['3','4','5']}

可选段(可以匹配到不带参数的路由)

app/blog/[[…slug]]/page.tsx -> app/blog -> {}

app/blog/[[…slug]]/page.tsx -> app/blog/2 -> {slug:2}

app/blog/[[…slug]]/page.tsx -> app/blog/3 -> {slug:3}

app/blog/[[…slug]]/page.tsx -> app/blog/3/4/5 -> {slug:['3','4','5']}

通过params参数获取值

//layout.tsx or page.tsx or route.ts or other?
export default function Page({ params }: { params: { slug: string } }) {
  return <h1>My Page</h1>
}

路由组

用处是将一系列相关的路由放在一个group中，这个group所对应的文件目录会在url中省略,也可以在组中增加layout.tsx，来使组中所有的route共享布局

用()表示一个route group

app/blog/(group)/a/page.tsx -> app/blog/a ->

app/blog/(group)/[slug]/page.tsx -> app/blog/2 -> {slug:2}

app/blog/(group)/[[…slug]]/page.tsx -> app/blog/3/4/5 -> {slug:['3','4','5']}

参考链接

Routing: Defining Routes | Next.js (nextjs.org)

Routing: Route Groups | Next.js (nextjs.org)

Routing: Dynamic Routes | Next.js (nextjs.org)