Add /policybench vanity redirect to policybench.org

src/PolicyEngine.jsx

@@ -45,6 +45,7 @@ import style from "./style";
 import RedirectToCountry from "./routing/RedirectToCountry";
 import CountryIdLayout from "./routing/CountryIdLayout";
 import RedirectBlogPost from "./routing/RedirectBlogPost";
+import ExternalRedirect from "./routing/ExternalRedirect";
 import { StatusPage } from "./pages/StatusPage";
 import ManifestosComparison from "./applets/ManifestosComparison";
 import DeveloperLayout from "./pages/DeveloperLayout";
@@ -346,6 +347,11 @@ export default function PolicyEngine() {
           <Route path="benefits" element={<BenefitAccessPage />} />
           <Route path="education" element={<EducationPage />} />
           <Route path="open-source" element={<OpenSourcePage />} />
+          {/* Vanity redirect: /[countryId]/policybench -> policybench.org */}
+          <Route
+            path="policybench"
+            element={<ExternalRedirect to="https://policybench.org" />}
+          />
           <Route path=":appName" element={<AppPage />} />
 
           <Route
@@ -392,6 +398,11 @@ export default function PolicyEngine() {
           {/* redirect from /countryId/blog/slug to /countryId/research/slug */}
           <Route path="blog/:postName" element={<RedirectBlogPost />} />
         </Route>
+        {/* Vanity redirect: bare /policybench -> policybench.org */}
+        <Route
+          path="/policybench"
+          element={<ExternalRedirect to="https://policybench.org" />}
+        />
         <Route path="/uk/cec" element={<CitizensEconomicCouncil />} />
         <Route path="/uk/2024-manifestos" element={<ManifestosComparison />} />
         <Route

src/__tests__/routing/externalRedirect.test.js

@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import ExternalRedirect from "../../routing/ExternalRedirect";
+
+describe("ExternalRedirect", () => {
+  const replaceMock = jest.fn();
+  let originalLocation;
+
+  beforeAll(() => {
+    originalLocation = window.location;
+    Object.defineProperty(window, "location", {
+      configurable: true,
+      writable: true,
+      value: { replace: replaceMock, href: "http://localhost/" },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, "location", {
+      configurable: true,
+      writable: true,
+      value: originalLocation,
+    });
+  });
+
+  beforeEach(() => replaceMock.mockClear());
+
+  test("redirects the browser to the external URL", () => {
+    render(<ExternalRedirect to="https://policybench.org" />);
+    expect(replaceMock).toHaveBeenCalledWith("https://policybench.org");
+  });
+
+  test("renders a fallback link to the destination", () => {
+    render(<ExternalRedirect to="https://policybench.org" />);
+    expect(screen.getByRole("link").getAttribute("href")).toBe(
+      "https://policybench.org",
+    );
+  });
+});

src/routing/ExternalRedirect.jsx

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+/**
+ * Redirects the browser to an external URL outside the SPA's router.
+ *
+ * react-router's <Navigate> only resolves in-app paths, so vanity routes
+ * that point at another domain (e.g. /policybench -> https://policybench.org)
+ * use this instead. Renders a short fallback link in case the redirect is
+ * slow or scripting is disabled.
+ */
+export default function ExternalRedirect({ to }) {
+  useEffect(() => {
+    window.location.replace(to);
+  }, [to]);
+
+  return (
+    <p style={{ padding: 50, textAlign: "center" }}>
+      Redirecting to <a href={to}>{to}</a>…
+    </p>
+  );
+}