Поддерживать активный статус кнопки смены языка i18next через сайт в Next.js - PullRequest
0 голосов
/ 22 февраля 2019

Я пытаюсь создать сайт с поддержкой нескольких языков в Next.js.У меня есть 2 кнопки - «EN» для английского и «ES» для испанского.И при нажатии они меняют язык нормально.Но как только другие страницы посещаются, кнопка «ES» или «EN» теряет свой активный статус.Это вызывает путаницу в отношении того, какой язык используется в настоящее время в отношении кнопок.Я новичок в React / Next.js, буду признателен за любую помощь или предложение по этому вопросу.

Вот мой код навигации / кнопки:

import { i18n, Link, withNamespaces } from 'i18n';
import { ButtonGroup } from 'reactstrap';

export class MainNav extends React.Component {
static async getInitialProps() {
    return {
        namespacesRequired: ['common', 'footer'],
    };
}

constructor(props) {
    super(props);

    this.state = {};


    this.onRadioBtnClick = this.onRadioBtnClick.bind(this);
}

onRadioBtnClick(rSelected) {
    this.setState({ rSelected });
    if (rSelected === 1) {
        i18n.changeLanguage((i18n.language = 'en'));
        this.setState({ rSelected: 1 });
    } else if (rSelected === 2) {
        i18n.changeLanguage((i18n.language = 'de'));
        this.setState({ rSelected: 2 });
    } else return;
}

... ...

                <Div className="lang-links">
                    <ButtonGroup>
                        <Button
                            color="light"
                            onClick={() => this.onRadioBtnClick(1)}
                            active={this.state.rSelected === 1}
                        >
                            EN
                        </Button>
                        <Button
                            color="light"
                            onClick={() => this.onRadioBtnClick(2)}
                            active={this.state.rSelected === 2}
                        >
                            ES
                        </Button>
                    </ButtonGroup>
                </Div>
...