How to make your own native JavaScript router

How to make your own native JavaScript router

Preface

When you think of routing, you usually think of libraries like React. But in reality, these libraries and frameworks still use vanilla JavaScript. So how can we achieve this?

I hope this "JavaScript Routing Tutorial" can help you understand how to write your own routers in native js.

Introduction

I meet a lot of people who want to create their own routing for various reasons. Since you are reading this article, it means you may be one of them!

Most importantly, using vanillajsrouter reduces your dependency on frameworks.

It's relatively easy to create your own routing in vanilla JavaScript, as long as you understand all the parts involved in implementing it.

Here are the key things to know when making your own JS router:

1. The key to native JS routing is the location.pathname property.

2. Listen for the "popstate" event in response to changes to .pathname. This happens whenever a new URL is entered in the browser's address bar, but we don't want to refresh the page, we just want to refresh the view by loading new content.

3. You can choose to store routes in the routes[] array.

4. JavaScript regular expressions ( RegEx ) must be used to parse the URL.

5. If you want to integrate routing into the native browser architecture, a basic understanding of history and history.pushState (JavaScript's History API) is essential.

First, we'll deal with the History API.

JavaScript History API

I've seen a lot of vanilla JS router tutorials that didn't mention the JavaScript History API. That's too bad, because clicking your browser's Back and Forward buttons is tied to navigating to URLs in your browsing history. Without the History API, there is no way to talk about routing.

1.history.back() is the same as history.go(-1), or when the user clicks the Back button in the browser. You can achieve the same effect either way.

2. When the user presses the browser's Forward button, history.forward() is executed, which is equivalent to history.go(1)".

3.go() is similar to the .back() and forward() methods, except that you can specify the number of steps to go forward or backward in the browser history stack. .

4. pushState() pushes the new state to the History API.

5..The length property is the number of elements in the session history.

6..state property is used to find the state without listening to the "popstate" event.

Implement your own native JS routing

Vanilla JS routing settings based on History API

Let’s first take a closer look at the minimal code needed to build a URL switcher ( without refreshing the page ), then I’ll show you a GIF of how it works.

<html>
    <head>
        <title>Hello</title>
        <script type = "module">
            function select_tab(id) {
                // remove selected class from all buttons
                document.querySelectorAll(".route").forEach(item => item.classList.remove('selected'));
                // select clicked element (visually)
                document.querySelectorAll("#" + id).forEach(item => item.classList.add('selected'));
            }
            function load_content(id) {
                // Update text "Content loading for {id}..."
                // Of course, here you would do you content loading magic
                // Perhaps run Fetch API to update resources
                document.querySelector("#content").innerHTML = 'Content loading for /' + id + '...';
            }
            function push(event) {
                // Get id attribute of the box or button or link clicked
                let id = event.target.id;
                // Visually select the clicked button/tab/box
                select_tab(id);
                // Update Title in Window's Tab
                document.title = id;
                // Load content for this tab/page
                loadContent(id);
                // Finally push state change to the address bar
                window.history.pushState({id}, `${id}`, `/page/${id}`);
            }
            window.onload = event => {
                // Add history push() event when boxes are clicked
                window["home"].addEventListener("click", event => push(event))
                window["about"].addEventListener("click", event => push(event))
                window["gallery"].addEventListener("click", event => push(event))
                window["contact"].addEventListener("click", event => push(event))
                window["help"].addEventListener("click", event => push(event))
            }
            // Listen for PopStateEvent (Back or Forward buttons are clicked)
            window.addEventListener("popstate", event => {
                // Grab the history state id
                let stateId = event.state.id;
                // Show clicked id in console (just for fun)
                console.log("stateId = ", stateId);
                // Visually select the clicked button/tab/box
                select_tab(stateId);
                // Load content for this tab/page
                loadContent(id);
            });
        </script>
        <style>
            * { /* global font */
                font-family: Verdana;
                font-size: 18px;
            }
            #root { display: flex; flex-direction: row; }
            #content { display: flex;
                display: block;
                width: 800px;
                height: 250px;
                /* vertically centered text */
                line-height: 250px;
                border: 2px solid #555;
                margin: 32px;
                text-align: center;
            }
            .route {
                cursor: pointer;
                justify-content: center;
                width: 150px;
                height: 50px;
                /* vertically centered text */
                line-height: 50px;
                position: relative;
                border: 2px solid #555;
                background: white;
                text-align: center;
                margin: 16px;
            }
            .route.selected { background: yellow; }
        </style>
    </head>

    <body>

        <section id = "root">
            <section class = "route" id = "home">/home</section>
            <section class = "route" id = "about">/about</section>
            <section class = "route" id = "gallery">/gallery</section>
            <section class = "route" id = "contact">/contact</section>
            <section class = "route" id = "help">/help</section>
        </section>

        <main id = "content">Content loading...</main>
    
    </body>

</html>

The core is to call window.history.pushState({id}, ${id}, /page/${id});

The first parameter is the unique ID of the state, the second is the "tab title" text, and the third parameter is the path you want to be displayed in the address bar. This is what allows the browser to change the URL without reloading the page.

result. Now, every time we click the button, the URL will actually change in the address bar of the browser. The content box is also updated.

Our native JS router is now operational. Note that each time the button is clicked, history.pushState is triggered. We simply pass it the id of the clicked element stored in the element's id attribute: home, about, gallery, etc. They should correspond to the actual page you are navigating to. Of course this is not the only way to store page names, you could use array[] or any other method. This is how it is done in this example.

Of course we also need to load the layout and resources for that location from the server. It depends on your program. It could be anything.

Make the Back and Forward buttons work

By using history.pushState you will automatically have the Back and Forward buttons navigate to the previous or next state. Doing this will generate a popstate event. This is the part where you have to update the view again. ( The first time is when we click the button .)

But since the event carries the id of the click, it's easy to refresh the view and reload the content when Back or Forward is clicked.

We are not using react or vue here, so in my source code load_content will be responsible for updating the view directly in the DOM. This area may be populated with some content loaded by your API. Since this is just a "front end" example, I can't show you much. But that's how it works on the client side .

Initialize the server-side routing load

There is one more step required to put it all together. In my example, only router.html was used. When you first load this route in your PWA, you must make sure that it works if you type /page/home directly into the address bar.

So far, we have only changed the router address from the front end . Assume that every time you navigate to a URL that appears on a router button, that URL is actually loaded individually from the server.

It is therefore your responsibility to ensure that the /page/about router and page are loaded into the root view of your application. It should also highlight the "current" button.

Once implemented, your routing is complete. How you choose to reload the content within the #content element is entirely up to you and your backend design.

The above is the details of how to make your own native JavaScript router. For more information about making native JavaScript routers, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Writing Maintainable Object-Oriented JavaScript Code
  • Using JavaScript to create maintainable slideshow code
  • Let's talk about what JavaScript's URL object is
  • Detailed explanation of the practical application of regular expressions in JavaScript
  • How to implement an array lazy evaluation library in JavaScript
  • Detailed explanation of the command mode in Javascript practice
  • How to Learn Algorithmic Complexity with JavaScript
  • Use a few interview questions to look at the JavaScript execution mechanism
  • Teach you how to write maintainable JS code

<<:  A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

>>:  Analysis of the implementation method of Nginx and Apache coexistence under Linux server

Recommend

Example of using CSS3 to achieve shiny font effect when unlocking an Apple phone

0. Introduction August 18, 2016 Today, I noticed ...

Briefly understand the two common methods of creating files in Linux terminal

We all know that we can use the mkdir command to ...

Using HTML web page examples to explain the meaning of the head area code

Use examples to familiarize yourself with the mean...

MySQL data analysis storage engine example explanation

Table of contents 1. Introduce cases 2. View the ...

How to use javascript to do simple algorithms

Table of contents 1 Question 2 Methods 3 Experime...

Script example for starting and stopping spring boot projects in Linux

There are three ways to start a springboot projec...

How to upgrade CentOS7 to CentOS8 (detailed steps)

This article uses a specific example to introduce...

Detailed explanation of how to install the system on VMware workstation 14 pro (virtual machine)

This article introduces how to install the system...

Detailed explanation of the implementation process and usage of the Linux Recycle Bin mechanism

Preface: rm under Linux system is irreversible. T...

How to install redis in Docke

1. Search for redis image docker search redis 2. ...

A brief discussion on HTML special character encoding CSS3 content: "I am a special symbol"

Some special characters and icons used in the pro...

The use and difference between vue3 watch and watchEffect

1.watch listener Introducing watch import { ref, ...

Detailed explanation of Linux system directories sys, tmp, usr, var!

The growth path from a Linux novice to a Linux ma...

CSS horizontal centering and limiting the maximum width

A CSS layout and style question: how to balance h...

Implementation of Single Div drawing techniques in CSS

You can often see articles about CSS drawing, suc...