使用Typescript、AppRouter从URL中获取数据并传递到NextJS中的另一个页面

k10s72fa  于 2023-08-04  发布在  TypeScript
关注(0)|答案(1)|浏览(121)

我有从主页到详细更改页面,我已经通过数据从主屏幕的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”但不起作用

wlsrxk51

wlsrxk511#

由于您在<Link/>组件中将成员对象作为“query”传入,因此应该使用useSearchParams,它将获取查询字符串。

const params = useSearchParams();
const id = params.get('id');

字符串

相关问题