javascript : why can i not get routes from url? – Blancer.com Tutorials and projects

i have 2 pages : index.html ans app.js

index.html looks like

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="app.js" defer></script>
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
    <div id="app">Loading...</div>

    <template id="login">
        <h1>Bank App</h1>
        <section>
          <a href="/dashboard">Login</a>
        </section>
    </template>

    <template id="dashboard">
        <header>
          <h1>Bank App</h1>
          <a href="/login">Logout</a>
        </header>
        <section>
          Balance: 100$
        </section>
        <section>
          <h2>Transactions</h2>
          <table>
            <thead>
              <tr>
                <th>Date</th>
                <th>Object</th>
                <th>Amount</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </section>
      </template>

  </body>
</html>

app.js looks like

const routes = {
    '/login': { templateId: 'login' },
    '/dashboard': { templateId: 'dashboard' },
  };

function updateRoute() {

    const path = window.location.pathname;
    const route = routes[path]
    console.log(route.templateId)

    const template = document.getElementById(route.templateId);
    const view = template.content.cloneNode(true);
    const app = document.getElementById('app');
    app.innerHTML = '';
    app.appendChild(view);
  }


updateRoute()

when i run on local (live) server in vs code, and hit localhost:5500/login, i am not getting the login template from index.html

any help please to know why ?