Я создаю многоязычный веб-сайт, и мне нужно отобразить текущий выбранный язык в параметрах URL-запроса (не только язык, но и KISS я рассмотрю только это).
Я использую response-intl для перевода веб-сайтов, а также для сохранения текущего выбранного языка в избыточном.
Вот как выглядит мой текущий маршрутизатор (HashRouter
):
return (
<div className="App">
<Provider store={store}>
<Router hashType="noslash">
<Content />
</Router>
</Provider>
</div>
);
}
let Content = connect(state => ({ language: state.common.language }))(props => {
const lang = props.language;
return (
<IntlProvider locale={lang} messages={messages[lang]}>
<Switch>
<Route path='/station_forecasts'>
<StationForecastsPage />
</Route>
<Route path="/">
<Redirect
to={{
pathname: "/station_forecasts",
search: "?sid=76"
}}
/>
</Route>
</Switch>
</IntlProvider>
);
});
Мой текущий подход заключается в добавлении следующего строки до StationForecastsPage
компонента:
useEffect(() => {
history.push({
pathname: `${window.location.href}`,
search: `?lang=${lang}`
});
});
, где lang
- код языка, взятый из хранилища избыточных данных. Однако это приводит к бесконечному значению l oop, и React выдает ошибку превышения максимальной глубины.
Я мог бы также использовать трюк window.location.href
, но это вызвало бы обновление страницы sh, которое, очевидно, не работает для меня.
Мой вопрос: каков наилучший способ реализации вышеупомянутого обновления параметров запроса?