useRoute hook

src/App.jsx

@@ -1,19 +1,20 @@
-import { useBattery } from "./hooks/js/useBattery";
+import { useBattery } from "./hooks/js/useBattery"
 import { useIsTouchDevice } from "./hooks/js/useIsTouchDevice"
+import { useRoute } from "./hooks/js/useRoute"
 
 function AppJs() {
-  const battery = useBattery();
-  const isTouchDevice = useIsTouchDevice();
+  const battery = useBattery()
+  const isTouchDevice = useIsTouchDevice()
+  const route = useRoute()
 
   return (
     <div>
       <p>Battery level:{battery.level * 100}</p>
       <p>{battery.charging ? "Battery charging" : "Battery not charging"}</p>
-
-      {isTouchDevice ? 'It is a touch device' : 'It is not a touch device'}
-
+      <p>Current route: {route.route}</p>
+      {isTouchDevice ? "It is a touch device" : "It is not a touch device"}
     </div>
-  );
+  )
 }
 
-export default AppJs;
+export default AppJs

src/App.tsx

@@ -1,18 +1,21 @@
-import { useBattery } from "./hooks/ts/useBattery";
-import { useIsTouchDevice } from "./hooks/ts/useIsTouchDevice";
+import { useBattery } from "./hooks/ts/useBattery"
+import { useIsTouchDevice } from "./hooks/ts/useIsTouchDevice"
+import { useRoute } from "./hooks/ts/useRoute"
 
 function AppTs() {
-  const battery = useBattery();
-  const isTouchDevice = useIsTouchDevice();
+  const battery = useBattery()
+  const isTouchDevice = useIsTouchDevice()
+  const route = useRoute()
 
   return (
     <div>
       <p>Battery level:{battery.level && battery.level * 100}</p>
       <p>{battery.charging ? "Battery charging" : "Battery not charging"}</p>
+      <p>Current route: {route.route}</p>
 
-      {isTouchDevice ? 'It is a touch device' : 'It is not a touch device'}
+      {isTouchDevice ? "It is a touch device" : "It is not a touch device"}
     </div>
-  );
+  )
 }
 
-export default AppTs;
+export default AppTs

src/hooks/js/useRoute.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react"
+
+export const useRoute = () => {
+  const [route, setRoute] = useState(window.location.pathname)
+
+  useEffect(() => {
+    const handleRouteChange = () => setRoute(window.location.pathname)
+
+    window.addEventListener("popstate", handleRouteChange)
+
+    return () => window.removeEventListener("popstate", handleRouteChange)
+  }, [])
+
+  const navigate = to => {
+    window.history.pushState({}, "", to)
+    setRoute(to)
+  }
+
+  return { route, navigate }
+}

src/hooks/ts/useRoute.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react"
+
+interface UseRouteOutput {
+  route: string
+  navigate: (newRoute: string) => void
+}
+
+export const useRoute = (): UseRouteOutput => {
+  const [route, setRoute] = useState<string>(window.location.pathname)
+
+  useEffect(() => {
+    const handlePopState = () => setRoute(window.location.pathname)
+
+    window.addEventListener("popstate", handlePopState)
+
+    return () => window.removeEventListener("popstate", handlePopState)
+  }, [])
+
+  const navigate = (newRoute: string) => {
+    window.history.pushState({}, "", newRoute)
+    setRoute(newRoute)
+  }
+
+  return { route, navigate }
+}