I'm struggling with transitioning from the Home page to the Detail page. I've successfully passed data to the URL from the Home screen, but I'm having trouble accessing it in the Detail screen. I'm working with NextJS ver 13, using Typescript and App Router. I attempted to use { useRouter } from "next/router", but it's deprecated in my version. Currently, I'm using { useParams } from "next/navigation", but I'm unsure how to implement it. Please assist me!
Below is my code: app/page.tsx:
'use client'
import Link from "next/link";
import Heading from "../Components/Heading";
import { data } from "autoprefixer";
import Router from "next/router";
import { send } from "process";
import type { NextPage } from "next";
export default function HomePage() {
return (
<>
<Heading>iOS Team</Heading>
<ul className="px-5">
{iOS.map(member =>
<li>
<Link
href={{
pathname: "/Detail",
query: member
}}>{member.account}</Link>
</li>
)}
</ul>
</>
)
}
List of members:
export const listMember = [
{
id: 1,
name: "name1",
age: 20,
},
{
id: 2,
name: "name2",
age: 18,
},
{
id: 3,
name: "name3",
age: 2,
}
]
Detail screen:
'use client'
import HomePage,{ listMember } from "../page";
import { useParams } from "next/navigation";
import { useRouter } from 'next/router';
export default function DetailMember() {
const params = useParams();
const member = listMember.find((item) => item.id === parseInt(params.id));
console.log(params)
return (
<>
<h1>
This is detail page of {member?.account}
</h1>
</>
)
}
I tried using "useParams" but it didn't work.