Creating an SPA Router in Vanilla JS

Building a vanilla js SPA Router step-by-step Guide For Beginners

১। public folder হিসেবে অবশ্যই index.html ফাইল টি নিতে হবে এবং তার মধ্যেই সকল navigation এবং main page গুলা থাকবে route আকারে ।

File Structure :

Note:-

public: index.html

JavaScript folder : * route.js

page or design: page.html

CSS : * style.css link public file

২। একটা js ফোল্ডার নিতে হবে এবং তার মধ্যে (Route.js) ফাইল টি অবশ্যই থাকতে হবে।

Route.js

  const route = (event) => {
    event = event || window.event;
    event.preventDefault();
    window.history.pushState({}, "", event.target.href);
    handleLocation();
 };

  const routes = {
    404: "/pages/404.html",
    "/": "/pages/index.html",
    "/about": "/pages/about.html",
    "/lorem": "/pages/lorem.html",
  };

  const handleLocation = async () => {
    const path = window.location.pathname;
    const route = routes[path] || routes[404];
    const html = await fetch(route).then((data) => data.text());
    document.getElementById("main-page").innerHTML = html;
 };

  window.onpopstate = handleLocation;
  window.route = route;

  handleLocation();

৩।স্টাইল এর জন্য একটা পাবলিক সিএস(css) ফাইল নিতে হবে (style.css) এবং তাকে পাবলিক index.html ফাইলে এর সাথে লিংক করতে হবে ।

৪। এবার যতগুলো ( .html )ফাইল লাগবে এক বা একাধিক ফোল্ডার এর মধ্যে .html ফাইল তৈরি করতে পারবে এবং সেগুলা Router.js ফাইলের মধ্যে যে router নামক object থাকবে সেগুলা সঠিক পাত অনুসারে লিংক করলেই হবে ।

Routes Object

const routes = {
    404: "/pages/404.html",
    "/": "/pages/index.html",
    "/about": "/pages/about.html",
    "/lorem": "/pages/lorem.html",
};

৫। Router.js এর ফাইলের মধ্যে router নামে যে অবজেক্ট(object) টি তৈরি করবো তার পাতগুলার অবশ্যই সঠিক হতে হবে না হলে .html পেজ কাজ করবে না ।

৬। index.html এ ফাইলে nav er navigation bar গুলাতে Link tag এর href attribute এর মধ্যে path থাকবে এবং onClick = “route()” লিখতে হবে এবং একটা <div id=”main-page”> tag </div> এর id রাখতে হবে কারন এইটাই change হবে ।

index.html file body

    <body>
        <div id="root">
            <nav id="main-nav" class="sidebar">
                <a href="/" onclick="route()">Home</a>
                <a href="/about" onclick="route()">About</a>
                <a href="/lorem" onclick="route()">Lorem</a>
            </nav>
            <div id="main-page"></div>
        </div>

        <script src="js/router.js"></script>
    </body>

Live Code

sWebCode

AD

File Structure :

Route.js

Routes Object

index.html file body

Post a Comment

Post a Comment

Contact Form