개발자
이전 router 처럼 페이지를 이동시키면서 쿼리 값으로 값을 넣어서 전달했었는데 13버전은 값 전달을 할 수 없나요...? 하는 법이 있다면 알려주시면 감사하겠습니다 ㅠㅠ
답변 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;
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 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!