Next.js 路由及传参

在本章中，我们将深入探讨 Next.js 中的路由系统及其参数传递方法。路由是现代 Web 应用程序的关键组成部分，它允许用户通过 URL 导航到应用程序的不同部分。Next.js 提供了多种路由方式和灵活的参数传递机制，这使得构建复杂应用变得简单而高效。

基础路由

Next.js 的基础路由非常直观，它使用文件系统作为路由层。这意味着你只需要创建相应的 .js 或 .tsx 文件，就能自动生成对应的路由。例如，在 pages 目录下创建一个名为 about.js 的文件，它将自动成为 /about 路径的一部分。

动态路由

除了静态路由外，Next.js 还支持动态路由。动态路由允许你在 URL 中嵌入变量，这些变量可以用来获取特定的数据或展示不同的页面内容。动态路由通过在文件名中使用方括号 [] 来定义，比如 [id].js 将匹配所有形如 /[id] 的路径。

示例：用户详情页

假设我们有一个展示用户信息的应用，每个用户的详情页面都基于其唯一的 ID。在这种情况下，我们可以创建一个名为 [id].js 的文件来处理所有的用户详情请求：

// www.javascriptcn.com code example
// pages/[id].js
import { useRouter } from 'next/router';

export default function User() {
  const router = useRouter();
  return (
    <div>
      <h1>User Detail Page</h1>
      <p>User ID: {router.query.id}</p>
    </div>
  );
}

在这个例子中，router.query.id 会根据实际访问的 URL 返回相应的用户 ID。

传参方式

除了利用动态路由传递参数外，Next.js 还提供了其他几种方法来传递数据和参数。

通过 Link 组件传递参数

Link 组件是 Next.js 提供的一种导航工具，它可以用来创建内部链接。通过这个组件，你可以轻松地向目标页面传递参数。

示例：使用 Link 传递参数

假设我们希望从一个列表页跳转到用户详情页，并传递用户 ID 作为参数：

// www.javascriptcn.com code example
// pages/users.js
import Link from 'next/link';

function Users() {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ];

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <Link href={`/users/${user.id}`}>
            <a>{user.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Users;

在这个例子中，点击用户名将会导航到带有相应用户 ID 的详情页面。

使用 Query String

在某些场景下，你可能希望通过查询字符串的方式向页面传递参数。虽然这种方法不如动态路由和 Link 组件那样直接，但它提供了一种灵活的方式来处理复杂的数据结构。

示例：通过 Query String 传递参数

假设我们需要在搜索结果页面接收并处理来自其他页面的查询字符串：

// www.javascriptcn.com code example
// pages/search.js
import { useRouter } from 'next/router';

export default function SearchResults() {
  const router = useRouter();
  const query = router.query.q;

  return (
    <div>
      <h1>Search Results for "{query}"</h1>
      {/* 展示搜索结果 */}
    </div>
  );
}

当访问类似 /search?q=关键词 的 URL 时，该页面会接收到并显示对应的搜索词。

路由重定向与重写

除了基本的路由和参数传递之外，Next.js 还支持路由重定向和重写，这对于优化用户体验、SEO 和后端服务迁移等场景非常有用。

路由重定向

路由重定向允许你在客户端或服务器端将用户从一个 URL 重定向到另一个 URL。

示例：设置客户端重定向

// www.javascriptcn.com code example
// pages/_app.js
import { useRouter } from 'next/router';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 如果用户未登录，则重定向到登录页面
    if (!isLoggedIn()) {
      router.push('/login');
    }
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

这段代码会在应用加载时检查用户是否已登录，如果未登录，则自动重定向至登录页面。

路由重写

路由重写允许你改变浏览器中的 URL 显示，但实际请求的是不同的页面。这对于 SEO 优化或者隐藏复杂的 URL 结构非常有用。

示例：配置路由重写

// www.javascriptcn.com code example
// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/articles/:slug', // 将 /blog/* 重写为 /articles/*
      }
    ];
  }
};

以上就是关于 Next.js 中的路由及参数传递的详细介绍。掌握这些知识可以帮助你更高效地构建出功能强大且用户友好的 Web 应用。