NextJS 13 App Router中如何更新动态路由参数？

我有一条路由user/[userId]/forms，其layout.tsx中包含一个下拉选择菜单。该下拉菜单的选项值为不同表单的ID，用户选择选项后，我希望导航至user/[userId]/forms/[formId]。我当前的实现方式如下：

import { useRouter, usePathName, useParams } from "next/navigation";

const router = useRouter();
const pathName = usePathName();
const params = useParams();

const handleOnChange = (formId: string) => {
  if(params.formId) {
    router.push(pathName.replace(params.formId, formId)); //若已选中表单，则替换
  } else {
    router.push(`${pathName}/${formId}`); //若未选中表单，则跳转
  }
}

该方法可行，但手动实现的方式存在潜在风险，比如当URL中存在与formId匹配的字符串时，可能会被错误替换。请问是否有更优的方式来设置动态路由分段的值？

直接基于已获取的userId参数构造目标路由，彻底规避字符串替换的风险：

import { useRouter, useParams } from "next/navigation";

const router = useRouter();
const params = useParams();

const handleOnChange = (formId: string) => {
  // 直接拼接正确的目标路由路径
  router.push(`/user/${params.userId}/forms/${formId}`);
}

无论当前处于user/[userId]/forms还是user/[userId]/forms/[oldFormId]，该方式都会直接跳转到正确的目标路由，不会出现误替换的问题。

如果需要更严谨的路由生成（比如应对复杂路由结构），可以使用Next.js的generatePath工具函数，它会严格按照路由模板填充参数：

import { useRouter, useParams } from "next/navigation";
import { generatePath } from "next/router";

const router = useRouter();
const params = useParams();

const handleOnChange = (formId: string) => {
  const targetPath = generatePath("/user/[userId]/forms/[formId]", {
    userId: params.userId as string,
    formId: formId
  });
  router.push(targetPath);
}

generatePath能确保路由格式的正确性，完全避免手动拼接或替换带来的错误。

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