Next.js 路由器区域设置问题

Question

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

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

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

url 得到正确更新以添加 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，以便也可以传递选项对象。

Next.js 路由器区域设置问题

Next.js router locale issue

javascript

internationalization

next.js