Next.js router.push不会更改URL中的区域设置

yzuktlbb 于 2023-05-06 发布在其他

关注(0)|答案(2)|浏览(228)

我通过将onClick绑定到两个<div>元素来更改locale：

import { useRouter } from 'next/router'
// other codes

const router = useRouter()

const changeLocale = (locale) => {
    router.push({
        router: router.pathname,
        query: router.query
    }, router.asPath, { locale })
}

return <div>
    <div onClick={() => changeLocale('en')}>EN</div>
    <div onClick={() => changeLocale('ru')}>RU</div>
</div>

问题是它不会改变URL。当我转到/en/about并单击此RU时，URL不会变为/ru/about。
为什么router.push不能正常工作？

next.js

来源：https://stackoverflow.com/questions/73274826/next-js-router-push-does-not-change-locale-in-url

2条答案

按热度按时间

iibxawm41#

注意router.push({})没有router属性！
要处理路由，请提供一个区域设置列表和默认区域设置，Next.js将自动处理路由。

// next.config.js
module.exports = {
  i18n: {
    // These are all the locales you want to support in
    // your application
    locales: ['en', 'ru'],
    // This is the default locale you want to be used when visiting
    // a non-locale prefixed path e.g. `/hello`
    defaultLocale: 'en',
  },
}

假设您使用的是next 12，要为默认语言环境添加前缀，请更新您的下一个配置：

// next.config.js

module.exports = {
  i18n: {
    locales: ['default', 'en', 'ru'],
    defaultLocale: 'default',
    localeDetection: false,
  },
  trailingSlash: true,
}

接下来，要添加自定义路由规则，请在页面中创建一个新文件middleware.js：

// middleware.js

import { NextRequest, NextResponse } from 'next/server'

const PUBLIC_FILE = /\.(.*)$/

export async function middleware(req: NextRequest) {
  if (
    req.nextUrl.pathname.startsWith('/_next') ||
    req.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return
  }

  if (req.nextUrl.locale === 'default') {
    return NextResponse.redirect(new URL(`/en${req.nextUrl.pathname}`, req.url))
  }
}

请访问nextjs文档以了解更多关于语言环境策略的信息

赞(0）回复(0）举报 2023-05-06

6qqygrtg2#

对我来说，问题是我有一个子菜单，所以默认区域设置的router.push被第二次调用，导致路由没有改变，因为没有区域设置改变。您可以在changeLocale方法中添加一个检查，以便在没有提供区域设置时返回。希望有帮助！

赞(0）回复(0）举报 2023-05-06