Handle redirects w/o Nginx

Author: jonfairbanks

client/src/components/App.js

@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Header from './header/Header';
 import Home from './home/Home';
 import Footer from './footer/Footer';
+import RedirectToApi from './redirect/redirect';
 
 import './styles.css';
 
@@ -15,6 +16,7 @@ const App = () => (
         <Header />
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route path="*" element={<RedirectToApi />} />
         </Routes>
         <Footer />
       </div>

client/src/components/redirect/redirect.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+
+function RedirectToApi() {
+  useEffect(() => {
+    const currentPath = window.location.pathname;
+
+    // If the path matches your desired pattern, redirect to the API
+    if (/^[0-9a-z!?@_-]{1,99}$/.test(currentPath.slice(1))) {
+      window.location.href = `https://yo-api.fairbanks.dev/api/link${currentPath}`;
+    } else {
+      // Handle non-matching routes, e.g., show a 404 page
+      window.location.href = '/';
+    }
+  }, []);
+
+  return <div>Yo dawg...</div>;
+}
+
+export default RedirectToApi;