React应用切换语言时自动跳转首页的问题解决

问题出在组件嵌套结构上：你给<IntlProvider>设置了key={localeLanguage}，每次切换语言时key值改变，会导致IntlProvider及其内部所有子组件（包括<BrowserRouter>）被完全卸载后重新挂载。而BrowserRouter重新挂载时会丢失之前的路由状态，所以页面自动跳回首页。

修复方案：调整组件嵌套层级 #

将<BrowserRouter>移到<IntlProvider>的外层，这样语言切换时只有IntlProvider及其内部内容重新渲染，BrowserRouter的路由状态不会被重置。

修改后的App.js代码：

import { MsalProvider } from "@azure/msal-react";
import "bootstrap/dist/css/bootstrap.min.css";
import { IntlProvider } from "react-intl";
import { BrowserRouter } from "react-router-dom";
import "./App.css";
import AppContent from "./AppContent";
import { lang } from "./assets/lang/lang";
import Header from "./pages/common/Header";
import { useState } from "react";

function App({ msalInstance }) {
  const [localeLanguage, setLocaleLanguage] = useState("en");
  const onChangeLanguage = (lang) => {
    setLocaleLanguage(lang);
  };
  return (
    <MsalProvider instance={msalInstance}>
      <BrowserRouter>
        <IntlProvider
          locale={localeLanguage}
          messages={lang[localeLanguage]}
        >
          <Header onChangeLanguage={onChangeLanguage} />
          <AppContent />
        </IntlProvider>
      </BrowserRouter>
    </MsalProvider>
  );
}
export default App;

原理说明 #

• BrowserRouter负责管理应用的路由状态，将它放在外层后，语言切换不会触发它的卸载/重新挂载，路由状态得以保留。
• 移除key={localeLanguage}后，IntlProvider会根据locale和messages的变化自动更新内部的翻译上下文，无需通过key强制重新渲染整个组件树。

这样修改后，点击语言切换按钮时，翻译会正常更新，同时用户会停留在当前页面。

内容的提问来源于stack exchange，提问作者doubting