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.asPath
is equal to /blog
Full component:
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"
},
Advertisement
Answer
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.