时间戳

首页 > 解决方案 > Next.js 添加 slug/params 以清理 URL

reactjs - Next.js 添加 slug/params 以清理 URL

问题描述

我在“页面”文件夹中有一个带有干净 URL 的结构，如下所示......

/pages/items/[pageNumber]/index.tsx

如果我router.push使用它，我会像这样使用它来访问该页面......

router.replace("/items/[pageNumber]", "/items/1")

这很好用，但现在我想向该 URL 添加一个查询参数（用于过滤器），我该怎么做？

我试过这个...

router.push(`/items/[pageNumber]/`, `/items/1/?${filterParams}`, { shallow: true });

但这不起作用，我想知道如何做到这一点。

标签： reactjsnext.jsslugnext-router

解决方案

当你像这样使用它时

router.push(`/items/[pageNumber]/`, `/items/1/?${filterParams}`, { shallow: true });

你没有将查询参数传递给页面，我猜你只是在地址栏中显示它们。

像这样的东西怎么样：

router.push({
  pathname '/items/[pageNumber]/',
  query: {
    param1: 'yes',
  },
}, {
  pathname: '/items/1/',
  query: {
    param1: 'yes',
  },
});

不要忘记query为您的案例更新部分。

推荐阅读