英文:
Issue sending data through pages in Next.js
问题
from my main page, I want, when clicking a button, to go to another page and transfer data to it, but it throws an error "TypeError: Cannot read properties of undefined (reading 'users')". There are a lot of conflicting information about this on the Internet, so I thought it would be better to ask here. Here are the two components:
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;
And this is the component that should receive the data, but apparently it's not receiving it:
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
Does anybody have any idea? This is my first Next.js project and it's pretty confusing.
英文:
from my main page, I want, when clicking a button, to go to another page and transfer data to it, but it throws an error "TypeError: Cannot read properties of undefined (reading 'users')". There are a lot of conflicting information about this on the Internet, so I thought it would be better to ask here. Here are the two components:
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;
And this is the component that should recieve the data, but aparently it´s not recieving it:
"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
Does anybody have any idea? This is my first Next.js project and it's pretty confusing.
答案1
得分: 1
After 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
"use client"
import React from 'react'
import { useSearchParams } from 'next/navigation';
const MainPage = () => {
const searchParams = useSearchParams();
const userAmount = searchParams.get('users');
return (
<div>{userAmount}</div>
)
}
export default MainPage
英文:
After Next 13 we have two useRouter, one is exported from 'next/router' that should be used with the old pages router and another exported from 'next/navigation' that should be used with the new app router. The router.query property only exists in the router from 'next/router', since you are using the one from 'next/navigation' (app folder implementation) router.query is returning as undefined. With the app router in order to get the query params you need to use useSearchParams. You can read more about it here https://nextjs.org/docs/app/api-reference/functions/use-search-params
"use client"
import React from 'react'
import { useSearchParams } from 'next/navigation';
const MainPage = () => {
const searchParams = useSearchParams();
const userAmount = searchParams.get('users');
return (
<div>{userAmount}</div>
)
}
export default MainPage
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论