[slug] 값은 어떻게 활용할 것 인가? - pages/category/[slug].js
import { useRouter } from 'next/router' // 선언
const router = useRouter();
const { slug } = router.query;
import { useRouter } from "next/router";
const CategorySlug = () => {
const router = useRouter()
const { slug } = router.query
return (
<h1>Category {slug}</h1>
)
}
export default CategorySlug;
query 가 있다면 ?
/category/food?from=event
{"slug" : "food", "from" : "event" }
import { useRouter } from "next/router";
const userInfo = () => {
const router = useRouter()
const { username, info } = router.query
return (
<h1>Username's {username} {info}</h1>
)
}
export default userInfo;
pages/cart/[...slug].js
를 /cart 로 접근하면 404가 나옵니다.pages/cart/[[...slug]].js
해주면 존재하지 않아도 기본 페이지가 생성 됩니다.
router 를 사용하면서 페이지 이동이 가능 합니다.
import Link from "next/link";
import { useRouter } from "next/router";
const CartSlug = () => {
const router = useRouter()
const { data } = router.query
return (
<>
<h1>CartSlug {JSON.stringify(data)}</h1>
<Link href="/cart/2022/08/07">
<a>2022년 8월 7일로</a>
</Link>
<button onClick={() => router.push('/cart/2022/08/10')}>2022년 8월 10일로</button>
</>
)
}
export default CartSlug;
getServerSideProps / getStaticProps 등을 다시 실행시키지 않고,
현재 상태를 잃지 않고 url 을 바꾸는 방법
예를 들어, 상태는 유지하면서 url 만 바꾸고 싶은 경우 ?
import { useRouter } from "next/router";
import { useState } from "react";
const userInfo = () => {
const router = useRouter()
const [clicked, setClicked] = useState(false)
const { status = 'initial'} = router.query
return (
<>
<h1>My Info</h1>
<h1>click : {String(clicked)}</h1>
<h1>Status : {status} </h1>
<button onClick={() => {
alert('change')
setClicked(true)
location.replace('/username/info?status=change')
}}>Edit : (replace)</button>
</>
)
}
export default userInfo;
true -> false
가 되는 이유는import { useRouter } from "next/router";
import { useState } from "react";
const userInfo = () => {
const router = useRouter()
const [clicked, setClicked] = useState(false)
const { status = 'initial'} = router.query
return (
<>
<h1>My Info</h1>
<h1>click : {String(clicked)}</h1>
<h1>Status : {status} </h1>
<button onClick={() => {
alert('change')
setClicked(true)
router.push('/username/info?status=change')
}}>Edit : (push)</button>
</>
)
}
export async function getServerSideProps(){
console.log('server')
return {
props : {},
}
}
export default userInfo;
import { useRouter } from "next/router";
import { useState } from "react";
const userInfo = () => {
const router = useRouter()
const [clicked, setClicked] = useState(false)
const { status = 'initial'} = router.query
return (
<>
<h1>My Info</h1>
<h1>click : {String(clicked)}</h1>
<h1>Status : {status} </h1>
<button onClick={() => {
alert('change')
setClicked(true)
router.push('/username/info?status=change', undefined, {shallow : true})
}}>Edit : (push)</button>
</>
)
}
export async function getServerSideProps(){
console.log('server')
return {
props : {},
}
}
export default userInfo;
{noticeList &&
noticeList.map((item, index) => {
return (
<Items
key={index}
onClick={() => router.push(
{pathname : `/setting/notice/[id]`,
query : { id : `${item.notice_id}` }})}
>
const router = useRouter()
const id = Number(router.query.id);