【Next】链接和导航、路由组

链接和导航

在 Next.js 中，有两种方法可以在路由之间进行导航：

• 使用 <Link> 组件
• 使用 useRouter 钩子

遍历的 key 需要加遍历部分最外层元素上。

错误示例：

正确写法：

/app/page.tsx

"use client"
import Link from "next/link";
import PostLink from "@/app/blog/PostList";

export default function Home() {
    const postData = [
        {id: 1, slug: 'aaa', title: 'aaa'},
        {id: 2, slug: 'bbb', title: 'bbb'},
        {id: 3, slug: 'ccc', title: 'ccc'},
    ]
  return (
      <>
          <h1 className={"text-4xl text-orange-500"}>
              Hello Home Page
          </h1>
          <br/>
          <Link href={"dashboard"}>to Dashboard</Link><br/>
          <PostLink posts={postData}/>
      </>
  );
}

/app/blog/PostList.tsx

import Link from "next/link";

export default function PostLink({posts}: any) {
    return (
        <ul>
            {posts.map((item: any) => (
                <li key={item.id}>
                    <Link href={`/blog/${item.slug}`}>
                        {item.title}
                    </Link>
                </li>
            ))}
        </ul>
    )
};

可以使用 usePathname() 来获取当前路由地址。

注意：usePathname only works in Client Components. Add the "use client" directive at the top of the file to use it.

如果你想滚动到导航上的特定 id（router 到特定目标页面的特定位置），你可以在你的 URL 附加 # 哈希链接，或者仅将哈希链接传递给 href 属性。

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

当然也可以禁用默认滚动导航的事件。

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

const router = useRouter()
router.push('/dashboard', { scroll: false })

其中，useRouter() 钩子只能在客户端组件内使用，并且是从 next/navigation 导入的。具体使用和 Vue 中的 useRouter() 相近。

路由组

在 app 目录中，嵌套文件夹通常映射到 URL 路径。 但是，你可以将文件夹标记为 路由组，以防止该文件夹名称包含在路由的 URL 路径中。

layout.tsx 也是同样的道理。

注意：包含路由组 不应该 的路由解析为与其他路由相同的 URL 路径。 例如，由于路由组不影响 URL 结构，因此 (marketing)/about/page.js 和 (shop)/about/page.js 都会解析为 /about 并导致错误。