Next.js:是否可以在使用应用程序目录时将对象传递给router.push()?

huangapple go评论60阅读模式
英文:

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.

&#39;use client&#39;

import { useParams, usePathname, useRouter } from &#39;next/navigation&#39;
import { language } from &#39;~/helper/data/common&#39;

function SwitchLang() {

  const router = useRouter()
  const params = useParams()
  const pathname = usePathname()

  console.log(params)

  const localeData = language.find((item) =&gt; item.key === params.lang)

  const handleChange = (key: string) =&gt; {
    if (key !== params.lang) {
      router.push(pathname, {
        params: {
          ...params,
          lang: key
        }
      })
    }
  }

  return (
    &lt;div
      className=&quot;relative border border-common-black px-2 py-1 rounded select-none cursor-pointer&quot;
    &gt;
      &lt;div className=&quot;w-6 text-center&quot;&gt;{localeData?.label}&lt;/div&gt;
        &lt;div className=&quot;absolute left-0 top-[calc(100%+2px)] w-full shadow-lg bg-common-white rounded &quot;&gt;
          {language.map((item, index) =&gt; (
            &lt;div
              key={index}
              className=&quot;px-2 py-1 hover:bg-[#ddd] text-center&quot;
              onClick={() =&gt; handleChange(item.key)}
            &gt;
              {item.label}
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
    &lt;/div&gt;
  )
}

export default SwitchLang

Ex: I have a route: /[lang]/product/[id].
In browser:
/en/product/3`

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: &#39;en&#39;, id: &#39;3&#39;}

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}`)

huangapple
  • 本文由 发表于 2023年7月6日 12:03:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76625413.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定