Next.js 添加 slug/params 来清理 URL [英] Next.js Add slug/params to clean URL

问题描述

我在页面"中有一个带有干净 URL 的结构像这样的文件夹...

I have a structure with a clean URL in the "pages" folder like this ...

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

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

And if I use router.push I use it like this to get to that page ...

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

效果很好，但现在我想向该 URL 添加查询参数(用于过滤器)，我该怎么做?

That works great, but now I want to add a query params (for filter) to that URL, how can I do that?

我试过了...

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

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

But that doesn't work, and I'm wondering how to do that.

推荐答案

当你这样使用时

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

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

you are not passing query params to the page, you are only showing them in the address bar, I guess.

这样的事情怎么样:

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

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

Don't forget to update query part for your case.

这篇关于Next.js 添加 slug/params 来清理 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！