pourquoi quand je switch de allMangas cela me renvoie cette erreur (mais pas pour about) Uncaught (in promise) TypeError: page.render3 is not a function
    router http://localhost:8000/app.js:23
import {ENDPOINT} from '../config.js';

export default class UserProvider {
  
  static fetchMangas = async () => {
    try {
      const response = await fetch(ENDPOINT);
      
      const data = await response.json();
      console.log(data);
      return data;
    } catch (error) {
      console.error(error);
    }
  }


}

//  récupèrez les détails d'un user en cherchant par id
// faire  le delete, l'ajout et la modification d'un user -> utiliser l'outil jsonserverconst Utils = {
  parseRequestURL: () => {
    let url = location.hash.slice(1).toLowerCase() || "/";
    let r = url.split("/");
    let request = {
      resource: null,
      id: null,
      verb: null,
    };
    request.resource = r[1];
    request.id = r[2];
    request.verb = r[3];
    return request;
  },
  sleep: (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
  },  

}
export default Utils;export default class About {
  async render3() {
    return `/*html*/
    <section class="information">
    <h1>Information</h1>
    <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>
    <p><a href = '/'>Back to home</a></p>`;
  }
}
import UserProvider from "../services/userprovider.js";
export default class AllMangas {
  async render(tag) {
    const mangas = await UserProvider.fetchMangas();
    const ul = document.createElement(tag);
    mangas.forEach((manga) => {
      const li = document.createElement("li");

      li.textContent =
        manga.title + " | Alternative titles :  " + manga.alternativeTitles;
      li.dataset.mangaId = manga.id;
      // li.setAttribute("mangaId", manga.id);
      li.addEventListener("click", async () => {
        const mangaId = li.dataset.mangaId;
        this.renderDetails(mangas, mangaId, "p");
      });
      ul.appendChild(li);
    });
    document.body.appendChild(ul);
  }

  async renderDetails(mangas, mangaId, tag) {
    let li = document.querySelector(`[data-manga-id="${mangaId}"]`);
    console.log(li);
    const p = document.createElement(tag);
    const manga = mangas.find((manga) => manga.id === mangaId);
    li.appendChild(p); 
    p.textContent = manga.genres + manga.staff; 
  }
}
export default class Error404 {
  async render3() {
    return `/*html*/
    <section class="error404">
      <h1>404</h1>
      <p>deso la page demandée n'existe pas</p>
      <p><a href = '/'>Back to home</a></p>
    </section>`;
  }
}import MangasAll from "./view/allmangas.js";
import Utils from "./services/utils.js";
import About from "./view/about.js";
import Error404 from "./view/error404.js";

const routes = {
  '/about': About,
  '/mangas': MangasAll,
  //'/mangas/:id': UserShow,
};

// let userAll = new UserAll();
// window.addEventListener("load", () => {
//   userAll.render("ul");
// });

const router = async () => {
  const content = null || document.querySelector('#content');
  let request = Utils.parseRequestURL();
  let parsedURL = (request.resource ? '/' + request.resource : '/') + (request.id ? '/:id' : '') + (request.verb ? '/' + request.verb : '');
  console.log(parsedURL);
  let page = routes[parsedURL] ? new routes[parsedURL] : Error404;
  content.innerHTML = await page.render3();
}

window.addEventListener('hashchange', router);
window.addEventListener('load', router);export const ENDPOINT = "http://localhost:3000/mangas";<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="app.js" defer></script>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#/about">About</a></li>
          <li><a href="#/mangas">Mangas</a></li>
        </ul>
      </nav>
    </header>
    <div id = "content"> </div>
    <h1>Fetch JSON</h1>
  </body>
</html>