|
1
|
import { useState, useEffect, useCallback } from "react"; |
|
2
|
|
|
3
|
/** |
|
4
|
* Custom hook for hash-based routing with wouter |
|
5
|
*/ |
|
6
|
export const useHashLocation = () => { |
|
7
|
const [loc, setLoc] = useState(window.location.hash.replace(/^#/, "") || "/"); |
|
8
|
|
|
9
|
useEffect(() => { |
|
10
|
const handler = () => setLoc(window.location.hash.replace(/^#/, "") || "/"); |
|
11
|
window.addEventListener("hashchange", handler); |
|
12
|
return () => window.removeEventListener("hashchange", handler); |
|
13
|
}, []); |
|
14
|
|
|
15
|
const navigate = useCallback((to: string) => { |
|
16
|
window.location.hash = to; |
|
17
|
}, []); |
|
18
|
|
|
19
|
return [loc, navigate] as [string, (to: string) => void]; |
|
20
|
}; |