我来帮你排查这个state变成undefined的问题，这种情况在React Router的跳转场景里其实挺常见的，咱们一步步来分析：

1. 先确认from变量的获取是否正确 #

首先你得确保在注册页里，你拿到的from不是undefined本身。很多时候问题出在这里——比如跳转注册页时有没有正确传递state？或者在注册页获取location.state.from的时候，有没有处理state可能不存在的情况？

举个正确的获取示例（用函数组件的useLocation）：

import { useLocation, useHistory } from 'react-router-dom';

const RegisterPage = () => {
  const location = useLocation();
  const history = useHistory();
  // 用可选链+默认值，避免state不存在时from变成undefined
  const from = location.state?.from || '/'; 

  const goBackToLogin = () => {
    history.push({ 
      pathname: '/login-page', 
      state: { from: from } 
    });
  };

  // ...你的注册逻辑
};

2. 尝试用history.replace代替push #

如果跳转的是同一个路径（比如从注册页跳回/login-page），history.push有时候会因为浏览器历史栈的复用逻辑，导致新的state没有被正确更新。这时候换成replace就能解决——它会替换当前的历史记录，而不是添加新的，能确保state被正确传递：

history.replace({ 
  pathname: '/login-page', 
  state: { from: from } 
});

3. 检查登录页是否正确监听location变化 #

就算你传对了state，如果登录页组件没有监听location的变化，也可能拿不到最新的state。比如函数组件里要把location作为useEffect的依赖，类组件要在componentDidUpdate里对比location的变化：

函数组件示例：

import { useLocation, useEffect } from 'react-router-dom';

const LoginPage = () => {
  const location = useLocation();

  useEffect(() => {
    // 每次location更新时，获取最新的state
    const from = location.state?.from || '/';
    console.log('跳转来源页面:', from);
    // 这里可以把from存到状态里，供后续登录跳转使用
  }, [location]); // 必须加这个依赖，不然不会触发更新

  // ...你的登录逻辑
};

4. 排查路由配置的特殊情况 #

如果上面的方法都没用，再检查下路由配置：比如登录页的路由有没有设置exact？或者是不是嵌套路由导致的匹配问题？不过这种情况比较少见，先优先排查前面三点。

一般来说，按照这个顺序排查，就能解决state丢失的问题啦～

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