React账号激活页面无法自动跳转至登录页问题求助

你的账号激活逻辑已正常生效，但自动跳转至登录页的功能失效，可从以下几个方向排查修复：

1. 确保跳转逻辑仅在激活成功后执行 #

当前代码中setTimeout写在try/catch外部，虽catch分支有return不会触发跳转，但将跳转逻辑移至try块内部更严谨，避免意外场景：

try {
  const response = await axios.get(`http://localhost:5000/api/auth/activate?token=${token}`);
  setMessage(response.data);
  // 仅激活成功时执行跳转
  setTimeout(() => {
    navigate('/login');
  }, 1000);
} catch (error) {
  setMessage('Failed to activate account. Please try again.');
  return;
}

2. 兜底方案：直接修改浏览器地址 #

若React Router的navigate方法因路由配置或异步环境问题失效，可改用直接跳转浏览器地址的方式：

setTimeout(() => {
  window.location.href = 'http://localhost:3000/login';
}, 1000);

3. 添加日志定位执行流程 #

在关键节点添加日志，确认setTimeout的回调是否正常执行，快速定位问题：

try {
  const response = await axios.get(`http://localhost:5000/api/auth/activate?token=${token}`);
  setMessage(response.data);
  console.log('激活成功，准备跳转');
  setTimeout(() => {
    console.log('执行跳转操作');
    navigate('/login');
  }, 1000);
} catch (error) {
  console.error('激活失败原因:', error);
  setMessage('Failed to activate account. Please try again.');
  return;
}

完整修复后的代码 #

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const ActivationPage = () => {
  const [message, setMessage] = useState("Activating your account...");
  const navigate = useNavigate();

  useEffect(() => {
    const activateAccount = async () => {
      const params = new URLSearchParams(window.location.search);
      const token = params.get('token');
    
      if (token) {
        try {
          const response = await axios.get(`http://localhost:5000/api/auth/activate?token=${token}`);
          setMessage(response.data);
          // 使用replace替换路由记录，避免后退回到激活页
          setTimeout(() => {
            navigate('/login', { replace: true });
          }, 1000);
        } catch (error) {
          console.error('激活失败:', error);
          setMessage('Failed to activate account. Please try again.');
          return;
        }
      } else {
        setMessage('Invalid activation token.');
      }
    };
    
    activateAccount();
  }, [navigate]);

  return (
    <div>
      <h1>Account Activation</h1>
      <p>{message}</p>
    </div>
  );
};

export default ActivationPage;

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