凭借实战经验，巧妙运用Next.js，轻松掌握路由技术

2023-12-24 01:27:17

深入浅出，剖析Next.js的路由机制

Next.js的路由机制可谓简单高效，其采用约定式路由，将pages目录作为路由根目录，目录下的.js文件会自动转为路由文件，而文件夹则会形成多级路由。如此一来，路由配置便变得清晰明了，且具备极佳的可读性。

文件名即路由，一目了然

让我们举个简单的例子来理解Next.js的路由机制。假设您在pages目录下创建了两个文件：index.js和user/index.js。这两个文件会自动生成两个可访问的路由：/index和/user/index。路由与文件名一一对应，一目了然，便于理解和记忆。

目录即路由，轻松构建多级结构

Next.js的路由机制还支持目录作为路由，这为构建多级路由提供了便利。例如，您可以在pages目录下创建user文件夹，并在其中创建index.js和user-profile.js两个文件。这样，您便创建了两个新的路由：/user/index和/user/user-profile。目录即路由的特性让您可以轻松构建复杂的路由结构，并保持代码的可读性和可维护性。

实战演练，掌握Next.js路由配置技巧

巧妙运用Link组件，实现页面跳转

Next.js提供了Link组件，它可以轻松实现页面跳转。Link组件接受一个href属性，用于指定要跳转的路由。例如，以下代码将实现从/index路由跳转到/user/index路由：

import Link from 'next/link';

export default function IndexPage() {
  return (
    <div>
      <Link href="/user/index">
        <a>Go to User Page</a>
      </Link>
    </div>
  );
}

灵活使用 useRouter()，获取路由信息

useRouter()函数可用于获取当前路由信息。它返回一个对象，其中包含有关当前路由的各种信息，例如路由参数、查询参数等。以下代码演示了如何使用useRouter()函数获取路由参数：

import { useRouter } from 'next/router';

export default function UserPage() {
  const router = useRouter();
  const { username } = router.query;

  return (
    <div>
      <h1>Welcome, {username}!</h1>
    </div>
  );
}