javascript - Next.js router locale issue - Stack Overflow

admin管理员组

文章数量:1289565

I have set up some locales for our app which are uk and us. For the blog we can have either us/blog or just /blog for the uk locale.

When I switch to us like so: (locale = "us")

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

the url gets correctly updated to have us/ prepended.

When I switch back to uk using handleRoute (locale= ""), it stays on us, although router.asPathis equal to /blog

Full ponent:

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"
  },
...

I have set up some locales for our app which are uk and us. For the blog we can have either us/blog or just /blog for the uk locale.

When I switch to us like so: (locale = "us")

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

the url gets correctly updated to have us/ prepended.

When I switch back to uk using handleRoute (locale= ""), it stays on us, although router.asPathis equal to /blog

Full ponent:

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"
  },
...

• javascript
• next.js
• internationalization
• next-router

Share Improve this question Follow edited Oct 1, 2022 at 10:46 juliomalves 50.4k2323 gold badges177177 silver badges168168 bronze badges asked Jan 22, 2021 at 12:56 AessandroAessandro 5,7712121 gold badges7272 silver badges146146 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

When routing using localized routes, you need to specify the locale by including additional options in the router.push call.

In your specific case, you can either do it by passing the desired locale in the options, and omitting it from the path:

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

Or specify it in the path directly but setting locale to false:

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

Note that in both cases you'll need to pass the extra second param as so that the options object can be passed too.

本文标签： javascriptNextjs router locale issueStack Overflow