Posted onJan 7, 2021

Building a Glimmer Router with Navigo

This is the third post in the series of building a Router component in Glimmer.js. In thesecond post we built our Router component using page.js for handling anchor tag clicks, history state changes and so on. In this post we are going to make use of a library callednavigo for all those capabilities.

Building a Glimmer Router with page.js

Rajasegar Chandran ・ Dec 29 '20

#glimmer#routing#glimmerjs

Navigo

Navigo is a simple dependency-free minimalistic JavaScript router with a fallback for older browsers. It is based on History API so it does update the URL of the page. It has got a simple mapping of route to a function call, parameterized routes, programmatic navigation between routes and lifecycle hooks such as before, after, leave, already. It can be easily integrated with HTML links viadata-navigo attribute.

You can install it with:

yarn add navigo -S

Navigo is created byKrasimir Tsonev based on this blog post by him calledA modern Javascript router in 100 lines.

The api of Navigo is very simple. First you have to create a new instance of Navigo,

constrouter=newNavigo('/');

And then using that instance, you have to define your route mappings with theon function of the router instance. The on function takes two parameters, one is the url and the next one is the handler function for that particular url.

router.on('/products/list',function(){// do something});

And finally, you have to trigger the resolving logic.

router.resolve()

App.js

We will be modifying ourApp component from theprevious post. The markup for ourApp.js component will look something like this. As you see we are using two components here,LinkTo andRouter. And ourRouter component is where the routing logic is placed.

<nav><ul><li><LinkTo@route="/">Home</LinkTo></li><li><LinkTo@route="about">About</LinkTo></li><li><LinkTo@route="contact">Contact</LinkTo></li></ul></nav><main><Router/></main>

LinkTo component

LinkTo is to render the anchor tags with special attributes for Navigo calleddata-navigo so that Navigo can pick up these elements and listen for their click events. The markup for LinkTo will be like:

<ahref={{@route}}data-navigo>{{yield}}</a>

Router component

This is just a placeholder component for rendering the page level components when the url is matched. All the routing logic is done through a modifier calledstartNavigo.

<divid="glimmer-router-outlet"{{startNavigo}}></div>

startNavigo modifier

The startNavigo modifier function is where we will instantiate the Navigo library and invoke it with the route mappings, the url and the handler functions from a separate file calledroutes.js.

functionstartNavigo(element){constrouter=newNavigo("/");constnavigoRoutes=routes(element);router.on(navigoRoutes).resolve();return()=>{router.destroy();}}

routes.js

Theroutes.js contains the route mappings for the various routes within the app. It will export a default function which takes only one parameter the element, which is passed on by the modifier functionstartNavigo in the previous section. And it returns an object of route mappings with the url patterns and the handler functions.

Inside each handler function, we will be resetting the element DOM content and then we will be using therenderComponent function from@glimmer/core to render the appropriate component. All the components are stored in a special folder calledpages in the project in a conventional fashion.

import{renderComponent}from'@glimmer/core';importHomefrom'./pages/Home.js';importAboutfrom'./pages/About.js';importContactfrom'./pages/Contact.js';exportdefaultfunction(element){return{'about':()=>{element.innerHTML='';renderComponent(About,element);},'contact':()=>{element.innerHTML='';renderComponent(Contact,element);},'*':()=>{element.innerHTML='';renderComponent(Home,element);}};}