Next.js-路由

Next.js是一个React框架，它允许您轻松创建服务器渲染React应用程序。为了允许服务器端渲染，Next.js为每个页面提供了一种由服务器负责渲染的方式。这些页面可以通过使用Next.js路由来访问。在这篇文章中，我们将深入了解Next.js路由。

路由与URL

路由是一个Web应用程序的核心部分。它允许开发人员定义应用程序的URL结构以及与URL相关的行为。在Next.js中，路由由文件系统和代码定义。每个页面在页面目录中都有一个独立的文件。例如，要创建“/about”页面，请在“pages”目录中创建名为“about.js”的文件。

在Next.js中，路由根据文件系统中的文件结构自动配置。这意味着您可以以一个简单的方式定义您的应用程序的URL结构。对于一个简单的Todo应用，我们可以有以下文件结构：

- pages/
    - index.js (对应"/")
    - todos/
        - index.js (对应"/todos")
        - [id].js (对应"/todos/:id")
    - about.js (对应"/about")

在该结构中，我们定义了以下URL：

• "/" 用于主页，由"pages/index.js"提供
• "/todos" 用于搜索todo列表，由"pages/todos/index.js"提供
• "/todos/:id" 用于查看单个todo详情页面，由"pages/todos/[id].js"提供
• "/about" 用于关于页面，由"pages/about.js"提供

客户端与服务器端路由

Next.js路由有两种类型：客户端链接和服务器端路由。客户端链接是通过JavaScript在浏览器中运行的路由，而服务器端路由由服务器直接处理。在Next.js中，只需导入“Link”组件即可创建客户端链接。

以下是一个基本示例：

import Link from 'next/link';

function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
        <li>
          <Link href="/blog">
            <a>Blog</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
}

在该示例中，我们使用“Link”组件生成三个链接：首页，关于和博客页面。当用户单击其中一个链接时，Next.js将使用客户端路由加载新页面。这是一种非常快速的方式，因为整个页面不必重新加载。相反，Next.js只需要加载更新的内容。

我们还可以使用Next.js的代码方式执行服务器端路由。服务器端的路由非常适合获取和处理数据库中的数据。我们可以将服务器端路由定义为包含数据提取逻辑的React组件。以下是服务器端路由的示例：

import { useRouter } from 'next/router';

function TodoItem() {
  const router = useRouter();
  const { id } = router.query;

  const todo = fetch(`/api/todos/${id}`).then(res => res.json());

  return <div>{todo.title}</div>;
}

export default TodoItem;

在该示例中，我们定义了一个名为“TodoItem”的React组件。如果在页面URL中传递了ID参数，则该组件将使用服务器端路由从数据库中检索todo数据。我们使用“useRouter”钩子来从路由参数中提取ID。由于路由是在服务器端处理的，因此可以使用常规的fetch或Axios等库来检索数据。

动态路由

在Next.js中，动态路由使我们能够根据URL中的参数生成页面。为了使用动态路由，请在页面目录中创建名为“[parameter].js”的文件。例如，要创建URL为“/users/:id”的页面，请在“pages/users/[id].js”中创建以下文件：

import { useRouter } from 'next/router';

function User() {
  const router = useRouter();
  const { id } = router.query;

  return <div>User ID: {id}</div>;
}

export default User;

在示例中，我们使用“useRouter”钩子从URL参数中提取ID值。当页面渲染时，Next.js将自动从URL中提取ID的值，并将视图的props对象更新为包含“id”的键，以便在组件中使用。

在页面组件外部进行客户端路由

有些情况下，我们需要在页面组件外部（例如，使用自定义导航栏）进行路由。在这种情况下，我们可以使用Next.js的“Router”导出来执行客户端路由操作。以下是客户端路由的示例：

import Router from 'next/router';

function handleClick() {
  Router.push('/about');
}

function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <button onClick={handleClick}>About</button>
        </li>
      </ul>
    </nav>
  );
}

在示例中，我们使用“Router.push”方法将用户重定向到“/about”页面。我们可以将此方法与React的事件处理程序一起使用，例如单击事件或表单提交事件。

总结

在本文中，我们介绍了Next.js的路由系统。我们了解了如何定义客户端链接和服务器端路由以及如何使用动态路由。我们还学习了如何在页面组件外部执行客户端路由。使用这些技术，您可以轻松创建具有优秀的可访问性和可维护性的React应用程序。