Issue
I have created simple functionality that allows to change allows to change language on page just by pushing language right after URL - i18n-next
. Here is how it looks like:
const [languages, ] = React.useState([{
language: 'Polish',
prefix: 'pl'
}, {
language: 'Russian',
prefix: 'ru'
}, {
language: 'English',
prefix: 'en'
}]);
const changeLanguage = async (language: string) => {
for (const lang of languages) {
if (lang.language === language) {
setPickedLanguage(lang.flag);
await router.push(lang.prefix);
}
}
};
The problem is, when user changes language on front-end in url you may have something like this - /pl/en
- if you change language twice or more. What I want to do is to set only once this language prefix, so it will be only /en
, /pl
and /ru
- and no those double routes.
I can't find anything in next
docs, so how can I fix it?
Solution
I have found answer, what you need to do, is instead of router
object use Link
, so on front it would look like this:
const ChangeLanguage = ({ defaultLanguage }: ChangeLanguageProps) => {
const { asPath } = useRouter();
const [showLanguages, setShowLanguages] = React.useState(false);
const [pickedLanguage, setPickedLanguage] = React.useState('');
const [languages, ] = React.useState([{
language: 'Polish',
flag: '🇵🇱',
prefix: 'pl'
}, {
language: 'Russian',
flag: '🇷🇺',
prefix: 'ru'
}, {
language: 'English',
flag: '🇬🇧',
prefix: 'en'
}]);
const changeLanguage = async (language: string) => {
for (const lang of languages) {
if (lang.language === language) {
setPickedLanguage(lang.flag);
setShowLanguages(false);
}
}
};
React.useEffect(() => {
switch (defaultLanguage) {
case 'en':
setPickedLanguage('🇬🇧');
break;
case 'ru':
setPickedLanguage('🇷🇺');
break;
case 'pl':
setPickedLanguage('🇵🇱');
break;
default:
setPickedLanguage('🇬🇧');
break;
}
}, []);
return (
<>
<PickedLanguage
onClick={() => setShowLanguages(!showLanguages)}
>{pickedLanguage}</PickedLanguage>
<ChangeLanguageContainer>
{showLanguages ? (
<LanguagesList>
{languages.map(item => (
<Link
key={item.language}
href={asPath}
locale={item.prefix}
>
<LanguageItem>
{item.prefix}
</LanguageItem>
</Link>
))}
</LanguagesList>
): null}
</ChangeLanguageContainer>
</>
);
};
Answered By - dokichan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.