我有从主页到详细更改页面,我已经通过数据从主屏幕的URL,但在详细屏幕我不能得到它。我使用NextJS版本13,与Typescript和应用程序路由器。我尝试从“next/router”使用{ useRouter },但在我的版本中已弃用。我现在正在使用“next/navigation”中的{ useParams },但我不清楚如何使用它。请帮帮我!!!
下面是我的代码: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>
</>
)
}
字符串
列表成员:
export const listMember = [
{
id: 1,
name: "name1",
age: 20,
},
{
id: 2,
name: "name2",
age: 18,
},
{
id: 3,
name: "name3",
age: 2,
}
]
型
详细信息屏幕:
'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>
</>
)
}
型
尝试使用“useParams”但不起作用
1条答案
按热度按时间wlsrxk511#
由于您在
<Link/>
组件中将成员对象作为“query”传入,因此应该使用useSearchParams,它将获取查询字符串。字符串