React使用useNavigate提交表单跳转后如何触发成功弹窗通知

现有方案问题根因 #

location.state和浏览器历史栈条目绑定，直接在组件内修改state属性不会同步更新历史栈存储的值，页面刷新时会从历史栈重新读取原始state，导致弹窗重复触发。 #

方案1：最小改动修复（无额外依赖） #

仅需调整现有逻辑，在触发弹窗后用replace模式替换当前路由的state，清空标识即可，不会新增多余的历史记录：

1. 修正表单提交时的传值，确保标识正确传递

const navigate = useNavigate();

const onSubmit = async (values: ClientFormValues): Promise<ApiError | undefined> => {
    const createClientResponse = await createClient(values);
    console.log("client response on submit = ", createClientResponse);
    if (!createClientResponse.success) return createClientResponse.error;
    // 传递正确的成功标识
    navigate(appPaths.clients.index, {state: {formSubmitted: true}});
};

2. 调整目标页逻辑，触发弹窗后清除路由state

const [open, setOpen] = useState(false);
const location = useLocation();
const navigate = useNavigate();
const state = location.state as { formSubmitted?: boolean };

const handleOpenAlert = () => setOpen(true);
const handleCloseAlert = () => setOpen(false);

useEffect(() => {
    if (state?.formSubmitted) {
        handleOpenAlert();
        // replace模式替换当前历史条目，清空state，刷新/回退都不会再读到标识
        navigate('.', { replace: true, state: {} });
    }
}, [state, navigate]);

该方案改动量极小，适合单一场景下的快速修复。 #

方案2：全局通知系统（适合多场景复用） #

如果项目中存在大量跨路由、跨组件的通知需求，建议抽离全局通知上下文，完全和路由逻辑解耦：

1. 封装全局通知Context，统一管理通知的添加、删除和渲染

import { createContext, useContext, useState, useCallback, ReactNode } from 'react';

type NotificationType = 'success' | 'error' | 'warning';
interface Notification {
  id: string;
  type: NotificationType;
  content: string;
}

interface NotificationContextValue {
  notifications: Notification[];
  pushNotification: (config: Omit<Notification, 'id'>) => void;
  removeNotification: (id: string) => void;
}

const NotificationContext = createContext<NotificationContextValue | null>(null);

export const NotificationProvider = ({ children }: { children: ReactNode }) => {
  const [notifications, setNotifications] = useState<Notification[]>([]);

  const pushNotification = useCallback((config: Omit<Notification, 'id'>) => {
    const id = crypto.randomUUID();
    setNotifications(prev => [...prev, { ...config, id }]);
    // 默认3秒自动关闭，可根据需求调整
    setTimeout(() => {
      setNotifications(prev => prev.filter(item => item.id !== id));
    }, 3000);
  }, []);

  const removeNotification = useCallback((id: string) => {
    setNotifications(prev => prev.filter(item => item.id !== id));
  }, []);

  return (
    <NotificationContext.Provider value={{ notifications, pushNotification, removeNotification }}>
      {children}
      {/* 全局通知弹窗挂载点，放在根布局下所有页面共用 */}
      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
        {notifications.map(notice => (
          <Alert
            key={notice.id}
            open
            type={notice.type}
            onClose={() => removeNotification(notice.id)}
          >
            {notice.content}
          </Alert>
        ))}
      </div>
    </NotificationContext.Provider>
  );
};

export const useNotification = () => {
  const context = useContext(NotificationContext);
  if (!context) throw new Error('useNotification must be used within NotificationProvider');
  return context;
};

2. 在根组件包裹NotificationProvider

import { BrowserRouter } from 'react-router-dom';
import { NotificationProvider } from './contexts/NotificationContext';

function App() {
  return (
    <BrowserRouter>
      <NotificationProvider>
        {/* 路由配置、其他根组件 */}
      </NotificationProvider>
    </BrowserRouter>
  );
}

3. 表单提交时直接触发通知，无需通过路由传值

const navigate = useNavigate();
const { pushNotification } = useNotification();

const onSubmit = async (values: ClientFormValues): Promise<ApiError | undefined> => {
    const createClientResponse = await createClient(values);
    if (!createClientResponse.success) return createClientResponse.error;
    pushNotification({ type: 'success', content: '客户端创建成功' });
    navigate(appPaths.clients.index);
};

目标页无需编写任何检测state的逻辑，通知会自动在全局位置渲染，通知状态存在React内存中，页面刷新会自动清空，不会出现重复触发的问题。如果需要支持刷新后保留未读通知，可将状态同步到sessionStorage，在通知被消费后立即删除存储值即可，不要使用localStorage避免通知跨标签页/跨会话残留。

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