example: setLinksHandler

tj · May 28, 2020 · 21b874e · 21b874e
1 parent 3442b55
commit 21b874e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/example/index.js b/example/index.js
@@ -1,5 +1,5 @@
-import React, {useCallback} from 'react'
-import {useLocation, usePush} from './use-location'
+import React, {useEffect} from 'react'
+import {useLocation, setLinksHandler} from './use-location'
 import {render} from 'react-dom'
 import {Router, loc} from '../src'
 
@@ -18,30 +18,17 @@ const Data = {
   },
 }
 
-function Link({to, ...props}) {
-  const push = usePush()
-
-  const click = useCallback(e => {
-    e.preventDefault()
-    push(to)
-  }, [to])
-
-  return (
-    <a href={to} onClick={click} {...props}/>
-  )
-}
-
 function Index({location, children}) {
   return (
     <>
       <h1>Pet List</h1>
       <p>
         At least it is not a to-do list.
-        Check out <Link to='/users'>users</Link> or <Link to='/pets'>pets</Link>.
+        Check out <a href='/users'>users</a> or <a href='/pets'>pets</a>.
       </p>
       <p>Current location is <b>{location}</b></p>
       {children}
-      <Link to='/something-not-exists'>Something non-existent</Link>
+      <a href='/something-not-exists'>Something non-existent</a>
     </>
   )
 }
@@ -55,7 +42,7 @@ function Users({children}) {
       <ul>
         {Object.values(users).map(({id, name}) => (
           <li key={id}>
-            <Link to={loc('/users/:id', {id})}>{name}</Link>
+            <a href={loc('/users/:id', {id})}>{name}</a>
           </li>
         ))}
       </ul>
@@ -75,7 +62,7 @@ function User({id}) {
       <ul>
         {userPets.map(({id, name}) => (
           <li key={id}>
-            <Link to={loc('/pets/:id', {id})}>{name}</Link>
+            <a href={loc('/pets/:id', {id})}>{name}</a>
           </li>
         ))}
       </ul>
@@ -92,7 +79,7 @@ function Pets({children}) {
       <ul>
         {Object.values(pets).map(({id, name}) => (
           <li key={id}>
-            <Link to={loc('/pets/:id', {id})}>{name}</Link>
+            <a href={loc('/pets/:id', {id})}>{name}</a>
           </li>
         ))}
       </ul>
@@ -109,8 +96,8 @@ function Pet({id}) {
 
   return (
     <p>
-      {pet.name} is a {pet.species} and is owned
-      by <Link to={'/users/' + user.id}>{user.name}</Link>.
+      <b>{pet.name}</b> is a <b>{pet.species}</b> and is owned
+      by <a href={'/users/' + user.id}><b>{user.name}</b></a>.
     </p>
   )
 }
@@ -122,6 +109,8 @@ function NotFound() {
 function App() {
   const location = useLocation()
 
+  useEffect(setLinksHandler, [])
+
   return (
     <Router {...{location}}>
       <Index {...{location}}>

diff --git a/example/use-location.js b/example/use-location.js
@@ -1,4 +1,4 @@
-import {useEffect, useState, useCallback} from 'react'
+import {useEffect, useState} from 'react'
 
 
 const on = (obj, ...args) => obj.addEventListener(...args)
@@ -26,9 +26,27 @@ export function useLocation() {
   return location
 }
 
-export function usePush() {
-  return useCallback(location => {
-    history.pushState(null, "", location)
-    window.dispatchEvent(new Event('pushstate')) // hack
-  }, [])
+export function setLinksHandler() {
+  const push = e => {
+    if (
+      e.defaultPrevented ||
+      e.button ||
+      e.metaKey || e.ctrlKey || e.shiftKey || e.altKey
+    ) return
+
+    const a = e.target.closest('a')
+    if (!a || a.target === '_blank') return
+
+    const {origin} = window.location
+    if (a.href.indexOf(origin)) return
+
+    e.preventDefault()
+
+    const url = a.href.slice(origin.length)
+    history.pushState(null, "", url)
+    window.dispatchEvent(new Event('pushstate')) // hack to notify
+  }
+
+  on(document.documentElement, 'click', push)
+  return () => off(document.documentElement, 'click', push)
 }