Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Rajasegar Chandran
Rajasegar Chandran

Posted on

     

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.

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
Enter fullscreen modeExit fullscreen mode

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('/');
Enter fullscreen modeExit fullscreen mode

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});
Enter fullscreen modeExit fullscreen mode

And finally, you have to trigger the resolving logic.

router.resolve()
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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();}}
Enter fullscreen modeExit fullscreen mode

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);}};}
Enter fullscreen modeExit fullscreen mode

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Javascript Toolsmith, Front-end developer
  • Location
    Chennai
  • Education
    Pondicherry University
  • Pronouns
    He
  • Work
    Front-end Architect
  • Joined

More fromRajasegar Chandran

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp