NextJS实现页面跳转时自动继承上一页查询参数

下面提供三种可行的实现方案，覆盖不同场景的需求：

方案一：封装自定义路由跳转函数 #

通过封装useRouter的push方法，自动合并当前页面的查询参数到目标地址。

1. 创建工具文件utils/router.js：

import { useRouter } from 'next/router';

export const useCustomRouter = () => {
  const router = useRouter();

  const push = (href, options = {}) => {
    // 复制当前页面的查询参数
    const currentQuery = { ...router.query };
    let targetPath = '';
    let targetQuery = {};

    // 解析传入的href，区分字符串和对象格式
    if (typeof href === 'string') {
      const [path, queryStr] = href.split('?');
      targetPath = path;
      if (queryStr) {
        targetQuery = Object.fromEntries(new URLSearchParams(queryStr));
      }
    } else {
      targetPath = href.pathname;
      targetQuery = href.query || {};
    }

    // 合并参数：目标参数优先级高于当前参数
    const mergedQuery = { ...currentQuery, ...targetQuery };

    return router.push({
      pathname: targetPath,
      query: mergedQuery,
    }, options);
  };

  return { ...router, push };
};

2. 在组件中使用自定义路由：

import { useCustomRouter } from '../utils/router';

export default function Dashboard() {
  const router = useCustomRouter();

  const goToProfile = () => {
    // 无需手动传参，自动携带当前页面的查询参数
    router.push('/profile');
  };

  return (
    <button onClick={goToProfile}>跳转到个人中心</button>
  );
}

方案二：自定义Link组件 #

针对通过Link组件跳转的场景，封装自动携带查询参数的自定义Link。

1. 创建组件components/CustomLink.js：

import Link from 'next/link';
import { useRouter } from 'next/router';

export const CustomLink = ({ href, ...props }) => {
  const router = useRouter();
  const currentQuery = { ...router.query };
  let targetHref = href;

  // 处理字符串格式的href
  if (typeof href === 'string') {
    const [path, queryStr] = href.split('?');
    targetHref = { pathname: path, query: { ...currentQuery } };
    // 合并原href中的查询参数（如果有）
    if (queryStr) {
      targetHref.query = { ...currentQuery, ...Object.fromEntries(new URLSearchParams(queryStr)) };
    }
  } else {
    // 处理对象格式的href
    targetHref = {
      ...href,
      query: { ...currentQuery, ...(href.query || {}) },
    };
  }

  return <Link href={targetHref} {...props} />;
};

2. 在页面中使用自定义Link：

import { CustomLink } from '../components/CustomLink';

export default function Dashboard() {
  return (
    <CustomLink href="/profile">跳转到个人中心</CustomLink>
  );
}

方案三：全局中间件处理 #

如果需要对所有路由跳转（包括直接输入地址的场景）生效，可以使用Next.js中间件全局拦截并添加参数。

创建middleware.js文件：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const currentQuery = request.nextUrl.searchParams;
  const pathname = request.nextUrl.pathname;
  // 指定需要自动携带的参数列表，可根据需求修改
  const paramsToCarry = ['name'];
  const newQuery = new URLSearchParams();

  // 收集需要携带的参数
  paramsToCarry.forEach(param => {
    if (currentQuery.has(param)) {
      newQuery.append(param, currentQuery.get(param));
    }
  });

  // 仅在非静态资源路径且有参数需要携带时重定向
  if (!pathname.startsWith('/api') && !pathname.startsWith('/_next') && newQuery.toString()) {
    const url = new URL(request.nextUrl);
    url.search = newQuery.toString();
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

// 配置中间件生效的路径（排除静态资源和API）
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

注意事项 #

• 如果目标页面不需要某些参数，可在调用push或使用CustomLink时手动传入参数覆盖当前参数。
• 若只需携带指定参数（而非全部），可在合并参数的步骤中过滤掉不需要的参数。

内容的提问来源于stack exchange，提问作者Potamir