Hooks Router & Nested relative Routes

nested.example.js

function Parent(props) {
      return (
        <>
          <Link to='/child'>Child</Link>
          <Route path='/child' component={Child}/>
        </>
      );
    }

    function Child({match}) {
      return (
        <>
          <Link to={`${match.url}/grandchild`}>Grandchild</Link>
          <Route path={`${match.path}/grandchild`} component={Grandchild} />
        </>
      )
    }

useRouter.js

import { useEffect, useState } from "react"
import { createBrowserHistory } from "history"
const history = createBrowserHistory()
const trim = url => url.replace(/^\/|\/$/g, "")

function useRouter(initial = "") {
  const [route, setRoute] = useState(initial)

  useEffect(() => {
    const { pathname, search } = new URL(route, window.location.href)
    if (window.location.pathname !== pathname) {
      history.push(pathname)
      setRoute(trim(document.location.pathname))
    } else if (window.location.search !== search) {
      history.replace(pathname + search)
    }
  }, [route])

  useEffect(() => {
    window.onpopstate = function historyChange(ev) {
      if (ev.type === "popstate") {
        setRoute(trim(document.location.pathname))
      }
    }
    setRoute(trim(document.location.pathname))
  }, [])

  return [route, setRoute]
}

export default useRouter