Estoy tratando de activar un mensaje de éxito de notificación emergente al enviar un formulario en React. El problema es que al enviar, la página se redirige a una página separada usando el gancho useNavigate() de React Router y no hay relación entre el componente del formulario y la página redirigida, por lo que necesito alguna forma de activar la ventana emergente después de que se haya realizado la redirección. lugar.

Actualmente estoy usando el accesorio de estado de useNavigate para pasar un valor booleano verdadero a la página redirigida al enviar el formulario. Esto funciona mediante el uso de un gancho useEffect para verificar primero si el valor es verdadero cuando la página se carga por primera vez, si es así, active la ventana emergente y luego cambie el valor de estado a falso, pero el valor de estado booleano se conserva y parece que no se puede cambiar cada vez actualiza la página, el valor vuelve a cambiar a verdadero para que se active la ventana emergente.

Si alguien puede aconsejarme o quizás conozca una mejor manera de manejar este tipo de ventanas emergentes entre rutas en React, se lo agradecería.

Aquí está mi código:

Componente de formulario onSubmit función:

 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: null}}); };

Página redirigida:

 const [open, setOpen] = useState(false); const location = useLocation(); const state = location.state as { formSubmitted?: boolean }; const handleOpenAlert = () => { setOpen(true); }; const handleCloseAlert = () => { setOpen(false); }; useEffect(() => { if (state && state.formSubmitted) { handleOpenAlert(); state.formSubmitted = false; } }, []);