Part2 : 게시판 > 상세페이지 만들기 2 (useRouter)

[시무룩피]

안녕하세요.
질문이 있어서 문의 글 남깁니다.

useRouter를 사용한 페이지 이동에서 아래와 같이 list/page.js에서 urlId를 프롭스로 넘겨서,
list/DetailLink.js 에서 push해주는 방식으로 해보려고 하는데
404 에러가 뜨네요

잘못된방법일까요


(list/page.js)

import { connectDB } from '@/util/database';
import Link from 'next/link';
import DetailLink from './DetailLink';

export default async function List() {

  const db = (await connectDB).db('forum')
  let result = await db.collection('post').find().toArray()

  return (
    <ul className="list-bg">
      {
        result.map((_, i) => {
          const urlId = `/detail/${result[i]._id.toString()}`;

          return (
            <li className="list-item" key={i}>
              <Link prefetch={false} href={urlId}>
                <h4>{result[i].title}</h4>
              </Link>
              <DetailLink urlId={urlId}/>
              <p>{result[i].content}</p>
            
            )
          }
        )
      }
    
  )
} 

(list/DetailLink.js)

'use client'

import {useRouter} from 'next/navigation'

export default function DetailLink({ urlId }){
  let router = useRouter();

  console.log(urlId)
  return (
    <button onClick={()=>{ router.push(`/detail/${urlId}`) }}>벝흔</button>
  )
}

[codingapple]

router.push(urlId) 해봅시다

[시무룩피]

아...page.js에서 제가 urlId 변수에 detail값도 같이 넘겨주고 있었군요...
감사합니다. 사랑합니다~

[글쓴이]

글