使用 NextJS 重定向后如何删除查询参数？答案

【问题标题】：How to drop the query parameters after a redirect with NextJS?使用 NextJS 重定向后如何删除查询参数？
【发布时间】：2021-09-07 05:33:49
【问题描述】：

在 NextJS 中，如何使用重定向将 /page?foo=bar 之类的 URL 转换为 /page/bar ？

我阅读了https://nextjs.org/docs/api-reference/next.config.js/redirects，但找不到解决方案。

我今天拥有的是：

{
   source: '/page',
   has: [
       { 
          type: 'query',
          key: 'foo'
       }
   ],
   destination: '/page/:foo',
   permanent: true
}

但这会使/page?foo=bar 变成/page/bar?foo=bar。

如何删除查询？

编辑：

所以我意识到这对 Netlify 根本不起作用。

我尝试关注https://docs.netlify.com/routing/redirects/，但查询参数保持不变。

【问题讨论】：

这是否有助于回答您的问题：NEXT JS - How to remove Query Params?？您可以使用next/router 删除客户端的参数。
我想要一个重定向，它可以按预期转换捕获的参数。现在的行为很奇怪
你的问题太酷了，对于这类问题，我总是为路由制作一个包装函数，并将它用于我想路由的任何地方。

标签： javascript reactjs next.js

【解决方案1】：

您可以使用middleware。

只需自己解析查询参数并添加重定向即可。

在 pages 目录下存储一个文件_middleware.ts：

export async function middleware(req: NextRequest) {
    const { pathname } = req.nextUrl;
    
    if (// Your-thing ) 
        return NextResponse.redirect(//Your-url);

    return NextResponse.next();
}

也许有不同的方式，我不知道，但没关系。

【讨论】：