BUG: route dose not resolve ?

LucaGabi commented 4 years ago

I'm submitting a ..BUG?.

[x] bug report
[ ] feature request
[ ] other (Please do not submit support requests here (below))

With the following code when link is clicked the router dose not activate, instead it dose browser get request. Using VSCode liveserver at 127.0.01:5500


<!DOCTYPE html>
<html lang="zxx">

<head>
   <script src="https://unpkg.com/universal-router/universal-router.min.js"></script>
</head>

<body>

   <a href="/page">page link</a>

   <script>
      const routes = {
         path: '/page',            // string or regexp or array of them, optional
         name: 'page',             // unique string, optional
         parent: null,             // route object or null, automatically filled by the router
         children: [],             // array of route objects or null, optional
         action(context, params) { // function, optional

            // action method should return anything except `null` or `undefined` to be resolved by router
            // otherwise router will throw `Page not found` error if all matched routes returned nothing
            return '<h1>The Page</h1>'
         },
         // ...
      }

      const options = {
         context: { user: null },
         baseUrl: '',
         resolveRoute(context, params) {
            debugger
            if (typeof context.route.action === 'function') {
               return context.route.action(context, params)
            }
            return undefined
         },
         errorHandler(error, context) {
            console.error(error)
            console.info(context)
            return error.status === 404
               ? '<h1>Page Not Found</h1>'
               : '<h1>Oops! Something went wrong</h1>'
         }
      }

      const router = new UniversalRouter(routes, options);

//      const result = router.resolve({ pathname: '/page' })
//      result.then(v=>console.log(v)) // => Page One

   </script>
</body>

</html>

frenzzy commented 4 years ago

The router contains only routes resolving code, you should handle click yourself. It is petty easy:

<!doctype html>
<html>
  <head>
    <title>Router Demo</title>
  </head>
  <body>
    <nav>
      <a href="/">Home</a> |
      <a href="/demo">Demo</a> |
      <a href="/page">Page</a>
    </nav>
    <main>
      <h1>Home</h1>
    </main>
    <script src="https://unpkg.com/universal-router/universal-router.js"></script>
    <script>
      const router = new UniversalRouter([
        { name: 'home', path: '', action: () => '<h1>Home</h1>' },
        { name: 'demo', path: '/demo', action: () => '<h1>Demo</h1>' },
        { name: 'page', path: '/page', action: () => '<h1>Page</h1>' }
      ])
      const container = document.getElementsByTagName('main')[0]
      const render = (pathname) => router.resolve(pathname).then(html => {
        container.innerHTML = html
      })
      window.addEventListener('click', event => {
        if (event.target.tagName === 'A') {
          event.preventDefault()
          render(event.target.pathname)
        }
      })
    </script>
  </body>
</html>

Demo: https://frenzzy.github.io/test/router-demo.html See other examples here: https://github.com/kriasoft/universal-router/issues/72#issuecomment-321491693 and here: https://github.com/kriasoft/universal-router/issues/80#issuecomment-281077903

LucaGabi commented 4 years ago

Thanks, after looking in the source I got that .. I've done exactly the same + some history handling.

kriasoft / universal-router

BUG: route dose not resolve ? #184