"use client"
 
import { useLocation } from "@/hooks/use-location"
 
export function Component() {
  const location = useLocation()
 
  const handleNavigate = () => {
    // Navigation in an event handler (safe)
    history.pushState({ page: "new" }, "", "/new-path")
  }
 
  React.useEffect(() => {
    // Navigation after render (safe)
    if (location.pathname === "/") {
      history.pushState({ page: "home" }, "", "/home")
    }
  }, [location.pathname])
 
  return (
    <div>
      <h1>Current Location</h1>
      <pre>{JSON.stringify(location, null, 2)}</pre>
      <button onClick={handleNavigate}>Go to New Path</button>
    </div>
  )
}