Next.js 添加 slug/params 清理 URL

Question

我在“页面”文件夹中有一个干净的结构 URL，就像这样...

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

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

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

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

我试过了...

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

但这行不通，我想知道该怎么做。

Answer 1

当你这样使用它时

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

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

这样的事情怎么样：

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

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

Next.js 添加 slug/params 清理 URL

Next.js Add slug/params to clean URL

reactjs

next.js

slug

next-router