Я пытаюсь создать сайт с поддержкой нескольких языков в 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>