diff --git a/packages/react/404.html b/packages/react/404.html
new file mode 100644
index 0000000..7fd7dd9
--- /dev/null
+++ b/packages/react/404.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script type="text/javascript">
+      const l = window.location;
+      l.replace(
+        l.origin +
+        l.pathname.split('/').slice(0, 1).join('/') + '/?/' +
+        l.pathname.slice(1).split('/').join('/').replace(/&/g, '~and~') +
+        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/react/package.json b/packages/react/package.json
index 6f4bcb9..a67ec43 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && cp ./404.html ./dist",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index 85bcf70..1f2b3a6 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -59,7 +59,7 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
           root: null,
           rootMargin: "0px",
           threshold: buildThresholdList(),
-        }
+        },
       );
       if (internalRef.current) {
         observer.observe(internalRef.current);
@@ -87,13 +87,24 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
 }
 
 const overrideComponents = {
-  pre: forwardRef<HTMLDivElement, { children: React.ReactElement }>((props, ref) => {
-    const { props: { children, className } } = React.cloneElement(React.Children.only(props.children));
+  pre: forwardRef<HTMLDivElement, { children: React.ReactElement }>(
+    (props, ref) => {
+      const {
+        props: { children, className },
+      } = React.cloneElement(React.Children.only(props.children));
 
-    const language = (typeof className !== "string" || !className.includes("language-") ? "typescript" : /language-([a-z]+)/.exec(className)![1]) ?? "typescript"
+      const language =
+        (typeof className !== "string" || !className.includes("language-")
+          ? "typescript"
+          : /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
 
-    return <Code ref={ref} language={language}>{children as string}</Code>;
-  }),
+      return (
+        <Code ref={ref} language={language}>
+          {children as string}
+        </Code>
+      );
+    },
+  ),
   code: forwardRef<HTMLElement, any>((props: any, ref) => (
     <code
       ref={ref}
@@ -139,10 +150,20 @@ const routes = Object.keys(docsModules).map((path) => {
   );
 });
 
+const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
+
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
-      <Route index element={<Home />} />
+      <Route
+        index
+        loader={() =>
+          REDIRECTED_404.test(window.location.search)
+            ? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/")
+            : true
+        }
+        element={<Home />}
+      />
       <Route path="docs" element={<DocsLayout />}>
         <Route index loader={() => redirect("/docs/introduction")} />
         <Route
@@ -169,15 +190,15 @@ const router = createBrowserRouter(
                 `/docs/components/${Object.keys(docsModules)[0]
                   .split("/")
                   .pop()
-                  ?.replace(".mdx", "")}`
+                  ?.replace(".mdx", "")}`,
               )
             }
           />
           {routes}
         </Route>
       </Route>
-    </Route>
-  )
+    </Route>,
+  ),
 );
 
 function App() {
