英文:
Nextjs: Is posible to pass object when router.push() using app dir?
问题
我在/app
目录下创建了一个Nextjs
应用程序。
我为我的应用程序创建了多语言支持,并添加了一个按钮来切换语言。
'use client'
import { useParams, usePathname, useRouter } from 'next/navigation'
import { language } from '~/helper/data/common'
function SwitchLang() {
const router = useRouter()
const params = useParams()
const pathname = usePathname()
console.log(params)
const localeData = language.find((item) => item.key === params.lang)
const handleChange = (key: string) => {
if (key !== params.lang) {
router.push(pathname, {
params: {
...params,
lang: key
}
})
}
}
return (
<div
className="relative border border-common-black px-2 py-1 rounded select-none cursor-pointer"
>
<div className="w-6 text-center">{localeData?.label}</div>
<div className="absolute left-0 top-[calc(100%+2px)] w-full shadow-lg bg-common-white rounded ">
{language.map((item, index) => (
<div
key={index}
className="px-2 py-1 hover:bg-[#ddd] text-center"
onClick={() => handleChange(item.key)}
>
{item.label}
</div>
))}
</div>
</div>
)
}
export default SwitchLang
例如,我有一个路由:/[lang]/product/[id]
。
在浏览器中,访问/en/product/3
。
我希望当切换语言时,路由变为/vi/product/3
。
在nextjs
中,使用pages
目录可以轻松实现这一点。
但在app
目录中,使用新的next/navigation
中的useRouter
。
当我使用console.log()
打印参数时,得到的结果是:{ lang: 'en', id: '3' }
。
我尝试使用以下代码:
router.push(pathname, {
params: {
...params,
lang: key
}
})
但它不起作用。
英文:
I create an Nextjs
app using /app
dir.
I create multi language
for my app, and a button
to switch language.
'use client'
import { useParams, usePathname, useRouter } from 'next/navigation'
import { language } from '~/helper/data/common'
function SwitchLang() {
const router = useRouter()
const params = useParams()
const pathname = usePathname()
console.log(params)
const localeData = language.find((item) => item.key === params.lang)
const handleChange = (key: string) => {
if (key !== params.lang) {
router.push(pathname, {
params: {
...params,
lang: key
}
})
}
}
return (
<div
className="relative border border-common-black px-2 py-1 rounded select-none cursor-pointer"
>
<div className="w-6 text-center">{localeData?.label}</div>
<div className="absolute left-0 top-[calc(100%+2px)] w-full shadow-lg bg-common-white rounded ">
{language.map((item, index) => (
<div
key={index}
className="px-2 py-1 hover:bg-[#ddd] text-center"
onClick={() => handleChange(item.key)}
>
{item.label}
</div>
))}
</div>
</div>
)
}
export default SwitchLang
Ex: I have a route: /[lang]/product/[id].
/en/product/3`
In browser:
I want when change language, the rout change into /vi/product/3
.
In nextjs
with pages
dir. I can do it easily.
But with app
dir, new useRouter
from next/navigation
.
The params
when I console.log()
is : {lang: 'en', id: '3'}
I try to use
router.push(pathname, {
params: {
...params,
lang: key
}
})
but is does not work.
答案1
得分: 0
App router 不支持 带有查询参数的 push
。
相反,你可以自己构建链接,例如:
router.push(`/${key}/product/${params.id}`)
英文:
App router does not support push
with query params.
Instead, you want to build the link yourself, for example:
router.push(`/${key}/product/${params.id}`)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论