diff --git a/src/app/album/[id]/page.tsx b/src/app/album/[id]/page.tsx index f9f896d..a2e91d8 100644 --- a/src/app/album/[id]/page.tsx +++ b/src/app/album/[id]/page.tsx @@ -5,7 +5,6 @@ import { motion, AnimatePresence } from 'framer-motion' import { IoChevronBack, IoChevronForward } from 'react-icons/io5' import { BsCalendar } from 'react-icons/bs' import { Photo } from '@/types/app/album' -import { useParams } from 'next/navigation' import { getImagesByAlbumIdAPI } from '@/api/album' import Masonry from "react-masonry-css" import Empty from '@/components/Empty' @@ -18,8 +17,16 @@ const breakpointColumnsObj = { 700: 2 }; -export default function AlbumPage() { - const { id } = useParams() +interface Props { + params: Promise<{ id: number }>; + searchParams: Promise<{ page: number; name: string }>; +}; + +export default async (props: Props) => { + const searchParams = await props.searchParams; + const params = await props.params; + const id = params.id; + const name = searchParams.name; const [list, setList] = useState([]) const [currentPhotoIndex, setCurrentPhotoIndex] = useState(null) @@ -108,13 +115,13 @@ export default function AlbumPage() { return ( <> - ๐Ÿ“ท ็…ง็‰‡ๅข™ - + {`๐Ÿ“ท ${name} - ็…ง็‰‡ๅข™`} +
{/* ็งป้™คๆœ€ๅคง้ซ˜ๅบฆ้™ๅˆถ */}
- {list.length === 0 ? ( + {list?.length === 0 ? ( ) : ( <> diff --git a/src/app/album/page.tsx b/src/app/album/page.tsx index 49b4c67..b2ac8b8 100644 --- a/src/app/album/page.tsx +++ b/src/app/album/page.tsx @@ -28,8 +28,8 @@ export default function AlbumPage() { getAlbumCatePaging() }, []) - const handleClick = (id: number) => { - router.push(`/album/${id}`) + const handleClick = (data: Cate) => { + router.push(`/album/${data.id}?name=${data.name}`) } return ( @@ -53,7 +53,7 @@ export default function AlbumPage() { >
handleClick(cate.id!)} + onClick={() => handleClick(cate)} > {/* ๅ›พ็‰‡ๅฎนๅ™จ */}