React切换语言重渲染时location.state为何变为undefined？

算力阿峰

2026-7-8

React路由state切换语言后丢失问题

问题描述

我在开发React项目时，用history.push({state: []})跳转组件并传递数据，目标组件通过useLocation()获取location.state访问数据。但切换应用语言（语言逻辑用setLocalStorage()实现）时，location.state突然变成undefined。

我看到有文章提过重渲染时location.state会变undefined，但react-router-dom文档里没明确说明，而且页面刷新时location.state并不会丢失。

我的疑问：

为何页面重渲染时会出现这种情况？
这种传递数据的方式是否为最佳实践？
如果不是，哪种方式可以避免此类问题？

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Dropdown } from 'react-bootstrap';
import classNames from 'classnames';

import enFlag from './flags/uk.jpg';
import italyFlag from './flags/italy.jpg';
import { useTranslation } from 'react-i18next';

// 语言列表
const Languages = [
  {
    name: 'English',
    flag: enFlag,
    short_name: 'en'
  },
  {
    name: 'Italian',
    flag: italyFlag,
    short_name: 'it'
  }
];

const LanguageDropdown = () => {
  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
  const [selectedLanguage, setSelectedLanguage] = useState(
    localStorage.getItem('defaultLang') !== null
      ? Languages.find(function (item: { name: string; flag: string; short_name: string }) {
          return item.short_name == localStorage.getItem('defaultLang');
        })
      : Languages[0]
  );

  const [t, i18n] = useTranslation('common');
  
  // 切换下拉菜单状态
  const toggleDropdown = () => {
    setDropdownOpen(!dropdownOpen);
  };

  const changeLanguage = async (lang: any) => {
    i18n.changeLanguage(lang.short_name);
    setSelectedLanguage(lang);
    localStorage.setItem('defaultLang', lang.short_name);
  };

  return (
    <Dropdown show={dropdownOpen} onToggle={toggleDropdown}>
      <Dropdown.Toggle
        id='dropdown-languages'
        as='a'
        onClick={toggleDropdown}
        className={classNames('nav-link waves-effect waves-light', {
          show: dropdownOpen
        })}>
         <img src={selectedLanguage.flag} alt={selectedLanguage.name} height='16' />
      </Dropdown.Toggle>
      <Dropdown.Menu className='dropdown-menu dropdown-menu-end'>
        <div onClick={toggleDropdown}>
          {(Languages || []).map((lang, i) => {
            return (
              <Link
                to='#'
                onClick={() => changeLanguage(lang)}
                className='dropdown-item notify-item'
                key={i + '-lang'}>
                <img src={lang.flag} alt={lang.name} className='me-1' height='12' />
                <span className='align-middle'>{lang.name}</span>
              </Link>
            );
          })}
        </div>
      </Dropdown.Menu>
    </Dropdown>
  );
};

export default LanguageDropdown;

问题解答

1. 重渲染时location.state丢失的原因

核心原因是切换语言时触发了路由的隐式跳转，而非单纯的组件重渲染。

如果你的项目中使用了react-i18next的语言检测插件（比如i18next-browser-languagedetector），且配置了从URL路径/参数检测语言，调用i18n.changeLanguage()时，插件会自动修改URL的语言标识（比如从/home变为/it/home），这会触发react-router的路由跳转。此时新的路由条目没有携带之前通过history.push传递的state，所以目标组件中location.state就变成了undefined。

而页面刷新时，浏览器的History API会保留当前路由条目的state数据，所以刷新后location.state不会丢失。

2. 这种传递数据的方式是否为最佳实践？

不是最佳实践，原因如下：

location.state是内存级别的临时数据，仅绑定到当前路由条目，路由跳转（包括隐式跳转）或页面重新挂载时很容易丢失；
虽然当前刷新时数据还在，但这是浏览器History API的特性，并非react-router的设计保障，不同浏览器或场景可能有差异；
数据无法在多个组件间共享，只能在跳转的目标组件中获取。

3. 替代方案

根据业务场景可选择以下更可靠的方式：

方案1：使用URL参数传递数据

如果数据是简单可序列化的（比如ID、字符串），可以将数据拼接在URL查询参数中：

// 跳转时
history.push({
  pathname: '/target',
  search: `?data=${encodeURIComponent(JSON.stringify(yourData))}`
});

// 目标组件中解析
import { useSearchParams } from 'react-router-dom';

const [searchParams] = useSearchParams();
const data = JSON.parse(decodeURIComponent(searchParams.get('data') || '[]'));

优点：数据持久化，刷新或路由跳转后不会丢失；缺点：不适合传递大量或敏感数据，URL长度有限制。

方案2：使用全局状态管理（Context API/Redux）

如果数据需要多组件共享或结构复杂，可使用全局状态管理：

用React Context创建全局数据上下文，跳转前存入上下文，目标组件从上下文中读取；
用Redux等状态管理库，将数据存入store，目标组件通过useSelector获取。

示例（Context API）：

// 创建DataContext
const DataContext = React.createContext(null);

// 在父组件中提供上下文
function App() {
  const [sharedData, setSharedData] = useState([]);
  return (
    <DataContext.Provider value={{ sharedData, setSharedData }}>
      <Routes>
        {/* 路由配置 */}
      </Routes>
    </DataContext.Provider>
  );
}

// 跳转前存入数据
const { setSharedData } = useContext(DataContext);
setSharedData(yourData);
history.push('/target');

// 目标组件中读取
const { sharedData } = useContext(DataContext);

优点：适合复杂数据和多组件共享，数据持久化；缺点：需要额外的状态管理代码。

方案3：使用localStorage/sessionStorage持久化数据

如果数据不需要全局共享，仅在跳转后使用，可存入localStorage/sessionStorage：

// 跳转时
localStorage.setItem('targetData', JSON.stringify(yourData));
history.push('/target');

// 目标组件中读取
const data = JSON.parse(localStorage.getItem('targetData') || '[]');
// 使用后建议删除，避免残留
localStorage.removeItem('targetData');

优点：数据持久化，刷新或路由跳转后不会丢失；缺点：存储容量有限（约5MB），不适合敏感数据，需要手动清理。

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

React切换语言重渲染时location.state为何变为undefined？

问题描述 #

LanguageDropdown组件代码 #

问题解答 #

1. 重渲染时location.state丢失的原因 #

2. 这种传递数据的方式是否为最佳实践？ #

3. 替代方案 #