potential fix for alert redirects

src/app/App.jsx

@@ -6,7 +6,12 @@ import { Apply } from "components/apply/Apply";
 import { Partners } from "components/content/Partners";
 import { JobDetails } from "components/job-details/JobDetails";
 import { Metadata } from "components/Metadata";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Redirect,
+  Route,
+  Switch,
+} from "react-router-dom";
 import { ErrorPage404 } from "../component-templates/ErrorPages/ErrorPage404";
 import { HrExcellenceInResearch } from "../components/content/HrExcellenceInResearch";
 import { Science4Refugees } from "../components/content/Science4Refugees";
@@ -30,10 +35,18 @@ export function App() {
       <div className="vf-body">
         <Switch>
           <Route exact path="/" component={EMBLHome} />
-          <Route path="/position/:jobRef" component={JobDetails} />
+          <Route path={["/position/:jobRef"]} component={JobDetails} />
           <Route path="/apply" component={Apply} />
           <Route path="/partners" component={Partners} />
+
+          <Route
+            path="/alerts/alert-email/:jobRef"
+            render={({ match }) => (
+              <Redirect to={`/position/${match.params.jobRef}`} />
+            )}
+          />
           <Route path="/alerts" component={Alerts} />
+
           <Route path="/ebi/iframe" component={EBIHome} />
           <Route
             path="/hr-excellence-in-research"

src/components/alerts/Alerts.jsx

-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { EMAIL_VALIDATION_REGEX } from "../../helpers/helpers";
 import { locationsWithCountries, positionTypes } from "data/jobs-data.json";
@@ -7,6 +7,8 @@ import "./Alerts.scss";
 
 /* Subscription-alerts page, uses react-hook-form */
 export function Alerts() {
+  const [subscriptionSuccess, setSubscriptionSuccess] = useState(false);
+  const [subscriptionFailure, setSubscriptionFailure] = useState(false);
   const formRef = useRef();
   const {
     register,
@@ -21,7 +23,18 @@ export function Alerts() {
   });
 
   const onSubmit = () => {
-    formRef.current.submit();
+    //console.log(formRef.current)
+    const formData = new FormData(formRef.current);
+    const params = new URLSearchParams(formData);
+    console.log(params.toString());
+    // formRef.current.submit();
+    fetch(`https://www.embl.de/jobs/searchjobs/index.php?${params.toString()}`)
+      .then(() => {
+        setSubscriptionSuccess(true);
+      })
+      .catch(() => {
+        setSubscriptionFailure(true);
+      });
   };
 
   /*
@@ -39,6 +52,13 @@ export function Alerts() {
     disabled: allPosValue && allPosValue[0] === "0",
   };
 
+  if (subscriptionSuccess) {
+    return <div>Sub success</div>;
+  }
+  if (subscriptionFailure) {
+    return <div>Sub failure</div>;
+  }
+
   return (
     <>
       <section className="vf-intro" id="an-id-for-anchor">
@@ -59,7 +79,7 @@ export function Alerts() {
         <div>{/* empty */}</div>
         <div className="vf-content">
           <form
-            action="https://www.embl.de/jobs/searchjobs/123index123.php"
+            action="https://www.embl.de/jobs/searchjobs/index.php"
             method="GET"
             className="vf-form"
             ref={formRef}