NextJS非组件场景下如何获取URL的query查询参数

实现方案 #

因为api.ts的静态常量会在模块初始化阶段就完成赋值，此时还拿不到页面运行时的URL查询参数，所以需要把静态导出改成动态获取的方式，具体操作如下：

1. 修改api.ts配置文件 #

// 定义默认基础URL
const DEFAULT_PROMOTION_BASE_URL = "你的默认服务地址";

// 导出动态获取方法，不要直接导出静态常量
export const getPromotionServiceBaseUrl = () => {
  // 服务端渲染环境下没有window，直接返回默认值
  if (typeof window === "undefined") return DEFAULT_PROMOTION_BASE_URL;

  // 解析当前页面查询参数
  const searchParams = new URLSearchParams(window.location.search);
  const overrideUrl = searchParams.get("service_base_override");

  // 存在合法覆盖参数则返回，否则返回默认值
  return overrideUrl || DEFAULT_PROMOTION_BASE_URL;
};

// 如果需要兼容原有导入逻辑，可以加以下导出，注意该值只会在模块加载时初始化一次，路由参数变化时不会更新
export const PROMOTION_SERVICE_BASE_URL = getPromotionServiceBaseUrl();

2. 修改saga中的调用逻辑 #

把原来直接引用常量的位置，改成调用方法获取实时配置：

// 导入方法替换原来的常量导入
import { getPromotionServiceBaseUrl } from '../../config/api';

function* requestSaga() {
  // 每次使用前调用获取最新的基础URL
  const baseUrl = getPromotionServiceBaseUrl();
  // 后续使用baseUrl拼接接口地址发起请求即可
}

服务端渲染场景适配 #

如果你的项目需要在服务端渲染阶段就用到覆盖后的地址，需要在getServerSideProps中拿到查询参数，存入redux store后，saga直接从store中读取参数做覆盖即可。

注意：如果前端路由跳转时会修改service_base_override参数，一定不要使用静态导出的常量，必须每次调用获取方法拿到最新值，否则配置不会同步更新。

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