From 360dfb4604bde8c4dc5459f849a40a063c1c58ec Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sun, 27 Oct 2024 15:49:39 +0100
Subject: [PATCH] fix(router): a link could include '%23' instead of '#'

---
 src/app.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app.tsx b/src/app.tsx
index 0e8eb1ff..5ac2fb44 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
+import { Outlet, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { isAllView, isSubscriptionsView } from './lib/utils/view-utils';
 import useIsMobile from './hooks/use-is-mobile';
@@ -90,6 +90,17 @@ const GlobalLayout = () => {
 };
 
 const App = () => {
+  // react router doesn't handle the %23 hash correctly, so we need to replace it with #
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    const currentPath = location.pathname + location.hash;
+    if (currentPath.includes('%23')) {
+      const correctedPath = currentPath.replace('%23', '#');
+      navigate(correctedPath, { replace: true });
+    }
+  }, [location, navigate]);
+
   return (
     <div className={styles.app}>
       <Routes>