4.Next.js14的路由设置和路由跳转

路由设置

Next.js 使用基于文件系统的路由器，其中使用文件夹来定义路由。所在在讲页面的时候我们也讲到了路由了，这里再做一个了解。

比如：我们在users下面创建一个new目录,同样也创建一个page.js页面

//users/new/page.tsx
export default function NewUserPage() {
    return (
        <h2>Hello NewUserPage</h2>
    )
}

然后通过访问：http://localhost:3000/users/new

配置动态路由

方括号

可以通过将文件夹的名称用方括号括起来来创建动态段：[folderName]。例如，[id] 或 [slug]。

动态段作为参数传递给 layout、page、route 和 generateMetadata 函数。

举个例子，比如有个博客，我们在app目录下面创建blog目录，[slug]是动态参数。现在我们创建一个这样的路由：app/blog/[slug]/page.js

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

我们可以通过访问：

http://localhost:3000/blog/a

/blog/a, /blog/b, … /blog/abc 现在都可以访问了，无论你在 /blog/ 下设置什么字符串，page.tsx 文件中写入的内容都会显示出来。

在动态路由页面，如果我们不知道props包含哪些值，可以使用props获取/blog/下指定的值。

路由链接和导航

使用`a`标签

比如我们要跳转到/users:

//app/page.tsx
export default function Home() {
  return (
   <main>
     <h1>Hello World</h1>
     <a href="/users">Users</a>
   </main>
  )
}

用a标签会使我们的资源重新加载。

使用`Link`组件

要使用Link组件，需要导入next/link。

//app/page.tsx
import Link from "next/link";
export default function Home() {
  return (
   <main>
     <h1>Hello World</h1>
     <Link href="/users">Users</Link>
   </main>
  )
}

设置动态导航

import Link from 'next/link'
 
export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

检查活动链接

可以用来usePathname()确定链接是否处于活动状态。例如，要为活动链接添加一个类，您可以检查当前的路径名是否与链接的 href 匹配：

...
const pathname = usePathname()
pathname === href 
...

设置锚点

<Link href="/dashboard#settings">Settings</Link>

禁用滚动恢复

Next.js路由的默认行为是在导航到新路由时滚动到顶部，或者在前进和后退导航时保持滚动位置。如果你想要禁用这个行为，可以将 scroll={false} 传递给 <Link> 组件，或者在 router.push() 或 router.replace() 中设置 scroll: false。

<Link href="/dashboard" scroll={false}>
  Dashboard
</Link>

预取（prefetch）功能

Link 组件中默认设置了预取功能。在开发环境中，当将鼠标悬停在链接上时，与链接目标页面相关的 JavaScript 文件等将在后台自动下载。在生产环境中，位于视口中的链接目标文件将在后台自动下载。

注意： 预取功能可以提高页面加载性能，但可能会增加网络流量。在某些情况下，您可能希望根据具体需求禁用预取，以节省带宽和资源。要禁用预取，可以在 Link 组件上设置 prefetch={false}。例如：

<Link href="/about"  prefetch={false}/>

路由导航`useRouter()`

使用useRouter()我们可以写编程式导航，但是它只能在客户端组件内使用。如下面例子：

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}