React.js重定向后判断登录状态显示弹窗及避免重复触发实现问题

核心问题根源 #

你的问题本质是误用了URL的search参数传递临时弹窗触发标记，这个参数会永久保留在地址栏，刷新、前进后退都会重复触发弹窗；同时没有区分「收藏页未登录跳转」和「主动登出跳转」两种场景，导致登出也误触发弹窗。

具体修改步骤 #

1. 修改收藏页重定向逻辑（usercollection.js） #

删掉冗余的search参数，只通过location.state传递弹窗触发标记，state属于路由临时状态，不会暴露在地址栏，避免和其他跳转场景冲突：

// usercollection.js
return (
    <>
      {currentUser === null ? (
        <Redirect
          to={{
            pathname: "/login",
            state: { showCollectionToast: true }, // 用语义化字段标记跳转来源
          }}
        />
      ) : (
        <>
        {/* 剩余收藏页代码 */}

2. 修改登录页逻辑（login.js） #

• 仅根据路由state的标记判断是否弹出提示
• 弹窗触发后立刻替换当前路由为纯登录页地址，清除所有临时state，刷新页面不会重复触发
• ToastContainer无需依赖location.search控制显示，无触发时本身不会渲染内容
  以下为react-router v5版本代码：

// login.js
import { useLocation, useHistory } from 'react-router-dom';

const location = useLocation();
const history = useHistory();
const notify = () =>
    toast.error("您需要登录后才能查看收藏内容！", {
      position: "bottom-center",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });

useEffect(() => {
    // 仅从收藏页跳转带标记时才触发弹窗
    if (location.state?.showCollectionToast) {
      notify();
      // 立刻替换路由清除state，刷新后不会再触发
      history.replace('/login', {});
    }
}, [location, history]); // 补充完整依赖项

return (
    <>
      <ToastContainer
        position="bottom-center"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
    {/* 剩余登录表单代码 */}

如果你的项目使用react-router v6版本，只需替换路由操作部分即可：

// react-router v6适配修改
import { useLocation, useNavigate } from 'react-router-dom';
const navigate = useNavigate();
// 替换路由的逻辑改为：
navigate('/login', { replace: true, state: {} });

3. 修改登出跳转逻辑 #

所有登出场景的跳转统一使用不带任何state和参数的纯登录路径即可：

// 登出逻辑跳转部分示例
history.push('/login');
// react-router v6版本：navigate('/login')

效果验证 #

• 未登录进入收藏页跳转登录页时，正常触发提示，地址栏仅显示/login无多余参数，刷新页面不会重复弹出提示
• 用户主动登出直接跳转纯登录页，不会触发弹窗

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