Вместо возврата на предыдущую страницу меняется язык

Question

У меня есть страница, на которой есть кнопка возврата назад.

import {useRouter} from "next/router";

export const BackButton = ({className}: { className?: string }) => {
    const router = useRouter()

    return (
       <div className={cl(className, cls.button)}>
         <div className={cls.inner} onClick={() => router.back()}>
           <OpenArrow/>
         </div>
       </div>
    )
}

Однако если перейти на эту страницу и на ней сменить язык, то кнопка ведет не на предыдущую страницу, а обратно меняет язык.

Т.е если я перейду с /kz/home на /kz/excursion, а потом сменю язык /en/excursion - при клике на кнопку возврата меня перекинет не на /en/home, а на /kz/excursion

Пожалуйста подскажите, как я могу редиректнуть пользователя именно на предыдущую страницу с текущим языком, а не на предыдущий язык.

Компонент смены языка:

import cls from "./index.module.scss"
import cl from "@utils/classnames"
import langs from "@constants/langs"
import {useTranslation} from "next-i18next";
import Link from "next/link";
import {useRouter} from "next/router";

const LanguagePicker = () => {
    const { locale, asPath } = useRouter()
    const { t } = useTranslation("common")

    return (
        <ul className={cls.picker__menu}>
            <li className={cls.label}>{t("language")}:</li>
            {langs.map(({ name, label }) => (
                <li className={cl(cls.lang, { [cls.lang__active]: name === locale })} key={name}>
                    <Link href={asPath} locale={name} >{name}</Link>
                </li>
            ))}
        </ul>
    )
}

export default LanguagePicker

Использую next 13.5.6 версии с pages директорией. Для i18n использую библиотеки next-i18next + i18next

Answer 1

Я нашел костыльное решение, однако оно корректно работает. При смене языка ставлю его в localStorage

const changeLanguage = (lng:Locale) => () =>  replace({
    pathname,
    query
}, asPath, {
    locale: lng,
}).then(() => {
    localStorage.setItem("lang", lng)
})

И в _app.tsx:

useLayoutEffect(() => {
    window.onpopstate = () => {
        router.replace(pathname, router.asPath, {
            locale: localStorage.getItem("lang") || router.locale
        })
    }

    return () => {
        window.onpopstate = null
    }
}, []);

БЛОГ НА HUSL

Вместо возврата на предыдущую страницу меняется язык

Ответы (1 шт):