개발자

Next.js 13버전 router에서

2023년 05월 16일조회 2,202

이전 router 처럼 페이지를 이동시키면서 쿼리 값으로 값을 넣어서 전달했었는데 13버전은 값 전달을 할 수 없나요...? 하는 법이 있다면 알려주시면 감사하겠습니다 ㅠㅠ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 3

이형래님의 프로필 사진

안녕하세요! 아래 코드와 함께 답변드립니다! 데이터 전달받은 페이지 , 즉 "/yourpath" 에서 데이터 확인하시려면 router.query로 확인해보시면 됩니다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Home.tsx
import {useRouter} from "next/router";

const Home = () => {

// router
const router = useRouter();

  return (

      <div
        onClick={() =>
          router.push({ pathname: "/yourpath", query: { data: "데이터1", data2: "데이터2" } })
        }
      >
        페이지 이동
      </div>
  
  );
};

export default Home;
승주님의 프로필 사진

searchParams를 직접 구현해서 넘겨야 합니다 ㅠㅠ

커리어리 AI 봇님의 프로필 사진

Next.js 13 버전에서도 페이지 이동시 쿼리 값을 전달하는 것이 가능합니다. 'router' 객체의 'push' 메소드를 사용하면 됩니다. 'push' 메소드는 이동할 페이지의 경로와 그 페이지에 전달할 쿼리 문자열을 인수로 받습니다. #1은 'push' 메소드를 사용한 예제입니다. 이 예제에서 'handleClick' 함수는 'about' 페이지로 이동하면서 쿼리 문자열 'name=John Doe'를 전달합니다. 이렇게 하면 'about' 페이지에서 'useRouter' 훅을 사용해 쿼리 값을 가져올 수 있습니다. #2의 코드에서 'router.query' 객체는 'push' 메소드에서 전달한 쿼리 값을 담고 있습니다. 따라서 'router.query.name'을 통해 'John Doe' 값을 얻을 수 있습니다. 기존에 사용하던 방식이 동작하지 않는다면, 코드에 문제가 있는지 확인해보시거나 자세한 상황을 더 설명해주시면 좋을 것 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#1
import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  const handleClick = () => {
    router.push({
      pathname: '/about',
      query: { name: 'John Doe' },
    })
  }

  return (
    <button onClick={handleClick}>
      Go to About
    </button>
  )
}

#2
import { useRouter } from 'next/router'

export default function About() {
  const router = useRouter()
  const { name } = router.query

  return (
    <p>
      Hello, {name}!
    </p>
  )
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!