Next.js 13버전 router에서

안녕하세요! 아래 코드와 함께 답변드립니다! 데이터 전달받은 페이지 , 즉 "/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를 직접 구현해서 넘겨야 합니다 ㅠㅠ

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>
  )
}