如何在 NextJS 13 应用程序路由器中更新动态参数？

Question

我有一条路线

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)); //If a form is already selected, change it.
  } else {
    router.push(`${pathName}/${formId}`); //If no form is selected, open that.
  }
}

这可行，但感觉非常手动并且可能不稳定。就像如果 url 曾经包含与 formId 匹配的字符串，那么它将被替换。

有没有更好的方法来设置动态路由段的值？

Answer 1

可以进行路由器推送。这对我有用。

 router.push(`${previousUserId}/forms/${updatedFormId]`);