From b1a13af3d1632b00b3d40e291e8221b4f08dbcb6 Mon Sep 17 00:00:00 2001 From: Vitor George Date: Tue, 17 Dec 2024 15:34:10 -0300 Subject: [PATCH 1/2] fix(usePathname): prevent duplication of subpath in pathname --- app/scripts/utils/use-pathname.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/scripts/utils/use-pathname.ts b/app/scripts/utils/use-pathname.ts index 702649e04..dba509cc5 100644 --- a/app/scripts/utils/use-pathname.ts +++ b/app/scripts/utils/use-pathname.ts @@ -13,14 +13,18 @@ import { useEffect, useState } from 'react'; */ export const usePathname = () => { const [pathname, setPathname] = useState( - typeof window !== 'undefined' ? window.location.pathname : '' + typeof window !== 'undefined' + ? window.location.pathname.replace(process.env.PUBLIC_URL ?? '', '') + : '' ); useEffect(() => { if (typeof window === 'undefined') return; const updatePathname = () => { - setPathname(window.location.pathname); + setPathname( + window.location.pathname.replace(process.env.PUBLIC_URL ?? '', '') + ); }; // Listen to popstate events (back/forward navigation) From 5c0bbbbdb83e964002fedc8c7c1dda183f74602e Mon Sep 17 00:00:00 2001 From: Vitor George Date: Tue, 17 Dec 2024 16:12:01 -0300 Subject: [PATCH 2/2] fix(usePathname): extract app pathname when PUBLIC_URL is a full URL --- app/scripts/utils/use-pathname.ts | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/app/scripts/utils/use-pathname.ts b/app/scripts/utils/use-pathname.ts index dba509cc5..802f3bcf9 100644 --- a/app/scripts/utils/use-pathname.ts +++ b/app/scripts/utils/use-pathname.ts @@ -1,5 +1,20 @@ import { useEffect, useState } from 'react'; +const appPathname = (() => { + try { + const publicUrl = process.env.PUBLIC_URL; + if (!publicUrl || typeof publicUrl !== 'string') return ''; + + // Use base URL fallback + const url = new URL(publicUrl, window.location.origin); + + // Remove trailing slash if present + return url.pathname.replace(/\/$/, ''); + } catch { + return ''; + } +})(); + /** * usePathname * * @@ -14,7 +29,7 @@ import { useEffect, useState } from 'react'; export const usePathname = () => { const [pathname, setPathname] = useState( typeof window !== 'undefined' - ? window.location.pathname.replace(process.env.PUBLIC_URL ?? '', '') + ? window.location.pathname.replace(appPathname, '') : '' ); @@ -22,9 +37,7 @@ export const usePathname = () => { if (typeof window === 'undefined') return; const updatePathname = () => { - setPathname( - window.location.pathname.replace(process.env.PUBLIC_URL ?? '', '') - ); + setPathname(window.location.pathname.replace(appPathname, '')); }; // Listen to popstate events (back/forward navigation)