NextJS - 동적 경로에 쿼리 매개 변수 추가

NextJS - 동적 경로에 쿼리 매개 변수 추가

내 NextJS 앱에는 모든 페이지에 표시되는 언어 선택기가 있습니다.새 언어를 선택할 때 쿼리 매개 변수를 추가하여 현재 URL을 바꾸기만 하면 됩니다.lang=en하게.

다음은 URL을 대체하는 기능입니다.

const changeLanguage = (lang: LanguageID) => {
    replace({
      pathname,
      query: { ...query, lang },
    });
  };

이 예에서는,replace,query그리고.pathname는 다음 라우터에서 송신됩니다.

현재 모든 것이 스태틱루트에서는 동작하지만 다이내믹루트에서는 동작시킬 수 없습니다.예를 들어 다음과 같은 폴더 구조를 가지고 있습니다.

pages
|_customers
|__index.tsx
|__[customerId].tsx

켜면http://localhost/customers그리고 언어를 영어로 바꾸면 URL이 로 바뀝니다.http://localhost/customers?lang=en그게 내가 원하는 거야하지만 내가 만약http://localhost/customer/1그리고 언어를 영어로 바꾸면 URL이 로 바뀝니다.http://localhost/customers/[customerId]?customerId=1&lang=en원하는 URL 대신http://localhost/customers/1?lang=en.

이제, 나는 내가 이 모든 것을asPath라우터에 접속하여 쿼리 스트링 오브젝트를 재구성합니다.langNext에 짜넣어야 할 것 같아요.또, 바닐라 JS로 간단하게 할 수 있는 것은 알고 있습니다만, 요점은 아닙니다.

내가 뭘 빼놓았나요?서버측 재렌더링을 하지 않고 다이내믹루트에 쿼리 파라미터를 추가할 수 있는 더 쉬운 방법이 있을까요?

감사해요.

현재 라우터에 더 많은 param을 추가한 후 자신을 푸시합니다.

const router = useRouter();
router.query.NEWPARAMS = "VALUE"
router.push(router)

이전 루트 전체를 송신할 필요가 없는 솔루션:replace교환할 필요가 있는 것을 치환하는 것 뿐이므로,

const router = useRouter();
router.replace({
   query: { ...router.query, key: value },
});

이 링크를 링크로 사용하려면 다음과 같이 사용합니다.

// ...
const { query } = useRouter();
// ...

<Link
    href={{
        pathname: router.pathname,
        query: { ...query, lang },
    }}
    passHref
    shallow
    replace
></Link>

여기서 설명한 바와 같이 루트 쿼리에 파라미터를 추가하고 라우터 자체를 푸시하려고 했습니다만, 동작합니다만, 많은 경고가 표시됩니다.

그래서 제가 밀어서/다음과 같이 쿼리 매개 변수를 통과했습니다.

const router = useRouter();
router.push({ href: '/', query: { myQueryParam: value  } });

그게 당신에게도 효과가 있기를 바랍니다.

애당초 피하고 싶었던 해결책을 쓰게 되었습니다.그것은 바로 이 문제를 가지고 놀기 위해서입니다.asPath적어도 경로가 같기 때문에 서버 측 재렌더링은 수행되지 않습니다.

최신 정보입니다.changeLanguage기능하다stringifyUrl로부터의query-string패키지)

  const changeLanguage = (lang: LanguageID) => {
    const newPathname = stringifyUrl({ url: pathname, query: { ...query, lang } });
    const newAsPath = stringifyUrl({ url: asPath, query: { lang } });
    replace(newPathname, newAsPath);
  };

아직 답을 찾고 있는 사람이 있다면 다음 js ^11.1.2입니다.이게 도움이 됐으면 좋겠어요.사용하다

const router = useRouter();
router.push({ pathname: "/search", query: { key: key } });

Next.js에서 동적 루팅을 사용하고 있으며 갱신된 쿼리 파라미터를 반영하기 위해 루트의 얕은 조정을 실시하는 경우 대체 접근법은 다음과 같습니다.

const router = useRouter()
const url = {
      pathname: router.pathname,
      query: { ...router.query, page: 2 }
    }
router.push(url, undefined, { shallow: true })

현재 경로 「경로」, 「경로」)가 됩니다.router.pathname쿼리)router.query의 상세 내용을 )와합니다.page 다음과 같은할 수 있습니다.기존 쿼리 매개 변수에서 병합하는 것을 잊은 경우 다음과 같은 오류가 나타날 수 있습니다.

제공된 href 값은 올바르게 보간할 쿼리 값이 누락되었습니다.

  let queryParams;
  if (typeof window !== "undefined") {  
    // The search property returns the querystring part of a URL, including the question mark (?).
    queryParams = new URLSearchParams(window.location.search);
    // quaeryParams object has nice methods
    // console.log("window.location.search", queryParams);
    // console.log("query get", queryParams.get("location"));
  }

에 inside inside inside changeLanguage ,

const changeLanguage = (lang: LanguageID) => {
    if (queryParams.has("lang")) {
      queryParams.set("lang", lang);
    } else {
      // otherwise append
      queryParams.append("lang", lang);
    }
    router.replace({
      search: queryParams.toString(),
    });
  };

언급URL : https://stackoverflow.com/questions/61466891/nextjs-appending-a-query-param-to-a-dynamic-route