React：在语言更改时更新 URL 查询参数答案

【问题标题】：React: update URL query params on language changeReact：在语言更改时更新 URL 查询参数
【发布时间】：2023-09-06 19:58:01
【问题描述】：

我正在构建一个多语言网站，需要在 URL 查询参数中显示当前选择的语言（不仅是语言，为了 KISS，我只考虑这个）。

我正在使用 react-intl 进行网站翻译以及在 redux 中存储当前选择的语言。

这是我当前的路由器 (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 是从 redux 商店获取的语言代码。但是，它会导致无限循环，并且 React 会抛出最大深度超出错误。

我也可以使用window.location.href 技巧，但它会导致页面刷新，这显然对我不起作用。

我的问题是实现上述查询参数更新的最佳方式是什么？

【问题讨论】：

在条件下使用位置/参数道具
@xadm 你能详细说明一下吗？
*.com/a/49242725/6124657 - 检查是否需要重定向

标签： reactjs redux react-intl

【解决方案1】：

您缺少useEffect 的依赖项，如果您将history 添加为useEffect 的依赖项，则应该可以工作：

useEffect(() => {
  history.push({
    pathname: `${window.location.href}`,
    search: `?lang=${lang}`
  })
}, [history]);

现在它只会在history 更改时运行。

【讨论】：