NextJS - 将查询参数附加到动态路由

JS

使用Next.JS开发应用程序时，我们经常需要在动态路由中传递查询参数。这些查询参数可以用于在页面之间传递数据或过滤内容。在本文中，我们将探讨如何将查询参数附加到动态路由中，并提供一个实际的案例代码。

首先，让我们看一个简单的例子，假设我们正在开发一个电子商务网站，并且我们希望在商品列表页面中显示特定类别的商品。我们可以使用动态路由来实现这一目标，并使用查询参数来传递商品类别。

首先，我们需要创建一个动态路由页面，用于显示商品列表。在Next.JS中，我们可以使用方括号来定义动态路由。在我们的例子中，我们将创建一个名为[category].JS的文件，其中category是我们用于接收商品类别的参数。

Javascript
// pages/[category].JS
import { useRouter } from 'next/router';
export default function Category() {
  const router = useRouter();
  const { category } = router.query;
  // 根据类别加载商品数据并渲染页面
  return (
    <div>
      <h1>{category}类商品列表</h1>
      {/* 商品列表 */}
    </div>
  );
}

在上面的代码中，我们使用useRouter钩子从路由中获取查询参数。然后，我们可以使用这个参数来加载相应类别的商品数据，并在页面中显示商品列表。

现在，我们需要在其他页面中创建链接，以便用户可以选择特定的类别并查看相应的商品列表。我们可以使用next/link组件来创建这些链接，并在链接中附加查询参数。下面是一个示例代码：

Javascript
// pages/index.JS
import Link from 'next/link';
export default function Home() {
  return (
    <div>
      <h1>电子商务网站</h1>
      <Link class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=/category?category=电子产品">
        <a>电子产品</a>
      </Link>
      <Link class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=/category?category=服装">
        <a>服装</a>
      </Link>
      {/* 其他类别链接 */}
    </div>
  );
}

在上面的代码中，我们使用Link组件创建了两个链接，分别指向/category?category=电子产品和/category?category=服装。这些链接将用户导航到[category].JS页面，并将查询参数category附加到动态路由中。

现在，当用户点击链接时，他们将被导航到相应的商品列表页面，并且页面将根据传递的查询参数加载相应的商品数据。例如，当用户点击“电子产品”链接时，他们将被导航到/category/电子产品页面，并且页面将显示电子产品的商品列表。

：

在本文中，我们学习了如何将查询参数附加到Next.JS动态路由中。我们使用了useRouter钩子来获取查询参数，并使用Link组件创建了带有查询参数的链接。通过这种方式，我们可以轻松地在页面之间传递数据，并根据查询参数加载相应的内容。

希望本文对你理解如何在Next.JS中将查询参数附加到动态路由有所帮助。祝你在开发过程中取得成功！