从我的主页，我想，当点击一个按钮，转到另一个页面，并将数据传输到它，但它抛出一个错误“TypeError：无法读取undefined的属性（阅读'users'）"。网上有很多关于这方面的相互矛盾的信息，所以我想在这里问一下会更好。以下是两个组件：
return (
<>
<h1>Zeke´s Bill Splitter</h1>
<h2>Enter the amount of people</h2>
<form onSubmit={checkAmount}>
<input
type="number"
onChange={saveInput} />
</form>
<Link
href={{
pathname: '/pages/mainPage',
query: { users: users }
}}>Go to main</Link>
</>
);
};
export default Page;这是应该接收数据的组件，但显然它没有接收数据：
"use client"
import React from 'react'
import { useRouter } from "next/navigation"
const MainPage = () => {
const router = useRouter()
const { userAmount } = router.query.users;
return (
<div>{userAmount}</div>
)
}
export default MainPage有人知道吗？这是我的第一个Next.js项目，它非常令人困惑。
1条答案
按热度按时间8yparm6h1#
在Next 13之后，我们有两个
useRouter，一个是从'next/router'导出的，应该与旧的页面路由器一起使用，另一个是从'next/navigation'导出的，应该与新的应用程序路由器一起使用。router.query属性只存在于'next/router'的路由器中，因为您正在使用'next/navigation'（应用程序文件夹实现）中的router.query返回为undefined。对于应用程序路由器，为了获取查询参数，您需要使用useSearchParams。你可以在这里阅读更多https://nextjs.org/docs/app/api-reference/functions/use-search-params