Router

Router like SPA

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#" onclick="loadPage('home')">Home</a></li>
          <li><a href="#" onclick="loadPage('about')">About</a></li>
          <li><a href="#" onclick="loadPage('contact')">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main id="content">
      <!-- Content will be loaded here dynamically -->
    </main>

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

CSS RouterJS RouterTS Router

Classic router

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>Welcome to the Home Page</h1>
      <p>This is the home page of our simple web app.</p>
    </main>

    <script src="app.js"></script>
  </body>
</html>

about.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Us</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>About Us</h1>
      <p>This is the about page where you can learn more about our app.</p>
    </main>

    <script src="app.js"></script>
  </body>
</html>

contact.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Us</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>Contact Us</h1>
      <p>This is the contact page. Get in touch with us!</p>
    </main>

    <script src="app.js"></script>
  </body>
</html>

CSS Router