Next.js 13버전 router에서

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

1// Home.tsx
2import {useRouter} from "next/router";
3
4const Home = () => {
5
6// router
7const router = useRouter();
8
9  return (
10
11      <div
12        onClick={() =>
13          router.push({ pathname: "/yourpath", query: { data: "데이터1", data2: "데이터2" } })
14        }
15      >
16        페이지 이동
17      </div>
18  
19  );
20};
21
22export 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#1
2import { useRouter } from 'next/router'
3
4export default function Page() {
5  const router = useRouter()
6
7  const handleClick = () => {
8    router.push({
9      pathname: '/about',
10      query: { name: 'John Doe' },
11    })
12  }
13
14  return (
15    <button onClick={handleClick}>
16      Go to About
17    </button>
18  )
19}
20
21#2
22import { useRouter } from 'next/router'
23
24export default function About() {
25  const router = useRouter()
26  const { name } = router.query
27
28  return (
29    <p>
30      Hello, {name}!
31    </p>
32  )
33}