Next.js 路由器语言环境问题

Question

我为我们的应用设置了一些语言环境，它们是uk 和us。对于博客，对于 uk 语言环境，我们可以使用 us/blog 或仅使用 /blog。

当我像这样切换到us 时：(locale = "us")

const handleRoute = (locale) => router.push(`${locale}${router.asPath}`)

网址已正确更新为在前面加上 us/。

当我使用handleRoute (locale="") 切换回uk 时，它会保持在us，尽管router.asPath 等于/blog

完整组件：

export const CountrySelector: React.FC = () => {
  const router = useRouter()
  const [selectedValue, setSelectedValue] = useState<string>(router.locale)

  const handleOnChange = (countryValue) => {
    setSelectedValue(countryValue)
  }

  const handleRoute = (locale) => router.push(`${locale}${router.asPath}`)

  const selectedValueLoweredCase = selectedValue.toLowerCase()

  const getCountryImageUrl = (countryLabel: string): string =>
    `/images/flag-${countryLabel}-sm.png`

  const getImageComponent = (countryLabel: string) => (
    <Image
      htmlWidth="25px"
      src={getCountryImageUrl(countryLabel)}
      alt={selectedValueLoweredCase}
    />
  )

  return (
    <>
      <div data-testid="country-selector">
        {console.log(router)}
        <Menu>
          <MenuButton
            as={Button}
            variant="countrySelector"
            rightIcon={<TriangleDownIcon marginTop="-6px" />}
          >
            <Flex align="baseline">
              <Box
                marginRight="12px"
                display={selectedValueLoweredCase === "us" ? "none" : "block"}
              >
                {getImageComponent("uk")}
              </Box>

              <Box
                marginRight="12px"
                display={selectedValueLoweredCase === "uk" ? "none" : "block"}
              >
                {getImageComponent("us")}
              </Box>
              <Box color={colors.black["100"]}>{selectedValue}</Box>
            </Flex>
          </MenuButton>
          <MenuList padding="0" borderRadius="0">
            <MenuOptionGroup
              onChange={(countryValue) => handleOnChange(countryValue)}
              defaultValue={selectedValue}
              type="radio"
            >
              <MenuItemOption value="UK" color="#000">
                <Flex align="baseline">
                  <Box marginRight="10px">{getImageComponent("uk")}</Box>
                  <Box
                    onClick={() => handleRoute("")}
                    textTransform="uppercase"
                    color={colors.black["100"]}
                  >
                    united kingdom
                  </Box>
                </Flex>
              </MenuItemOption>
              <MenuItemOption value="US">
                <Flex align="baseline">
                  <Box marginRight="10px">{getImageComponent("us")}</Box>
                  <Box
                    onClick={() => handleRoute("us")}
                    textTransform="uppercase"
                    color={colors.black["100"]}
                  >
                    united states
                  </Box>
                </Flex>
              </MenuItemOption>
            </MenuOptionGroup>
          </MenuList>
        </Menu>
      </div>
    </>
  )
}

nextConfig.js：

...
  i18n: {
    localeDetection: false,
    locales: getRegions(), // ["uk", "us"]
    defaultLocale: getDefaultRegion(), // "uk"
  },
...

Answer 1

使用本地化路由进行路由时，您需要通过在 router.push 调用中包含其他选项来指定区域设置。

在您的特定情况下，您可以通过在选项中传递所需的语言环境并从路径中省略它来做到这一点：

const handleRoute = (locale) => router.push(router.asPath, router.asPath, { locale: locale })

或者直接在路径中指定，但将locale设置为false：

const handleRoute = (locale) => router.push(`${locale}${router.asPath}`, `${locale}${router.asPath}`, { locale: false })

请注意，在这两种情况下，您都需要传递额外的第二个参数 as，以便也可以传递选项对象。