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.
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);}};}
Source Code
The source code for this post is available in this Githubrepository.
References:
Please let me know for any queries/feedbacks in the comments section.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse