-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(catalog): introduce usePathname hook, remove React Router de…
…pendency from the Catalog
- Loading branch information
Showing
6 changed files
with
66 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| /** | ||
| * usePathname | ||
| * * | ||
| * This hook is implemented to work in both client-side rendering | ||
| * and server-side rendering environments. During SSR, it initializes the | ||
| * `pathname` as an empty string, ensuring the application remains stable in | ||
| * non-browser environments. | ||
| * | ||
| * @returns {string} The current `pathname`. Returns an empty string during SSR | ||
| * or if the `window` object is unavailable. | ||
| */ | ||
| export const usePathname = () => { | ||
| const [pathname, setPathname] = useState( | ||
| typeof window !== 'undefined' ? window.location.pathname : '' | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (typeof window === 'undefined') return; | ||
|
|
||
| const updatePathname = () => { | ||
| setPathname(window.location.pathname); | ||
| }; | ||
|
|
||
| // Listen to popstate events (back/forward navigation) | ||
| window.addEventListener('popstate', updatePathname); | ||
|
|
||
| // Detect programmatic navigation by dispatching a custom event | ||
| const originalPushState = history.pushState; | ||
| const originalReplaceState = history.replaceState; | ||
|
|
||
| const customEvent = new Event('pathnamechange'); | ||
| const dispatchPathnameChange = () => { | ||
| window.dispatchEvent(customEvent); | ||
| }; | ||
|
|
||
| history.pushState = function (...args) { | ||
| originalPushState.apply(this, args); | ||
| dispatchPathnameChange(); | ||
| }; | ||
|
|
||
| history.replaceState = function (...args) { | ||
| originalReplaceState.apply(this, args); | ||
| dispatchPathnameChange(); | ||
| }; | ||
|
|
||
| window.addEventListener('pathnamechange', updatePathname); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('popstate', updatePathname); | ||
| window.removeEventListener('pathnamechange', updatePathname); | ||
| history.pushState = originalPushState; | ||
| history.replaceState = originalReplaceState; | ||
| }; | ||
| }, []); | ||
|
|
||
| return pathname; | ||
| }; |