Estoy tratando de enrutar un proyecto SPA, pero por alguna razón dice que mi función no está definida. Soy nuevo en esto, por lo que podría pasar por alto algo, busqué en Internet y encontré esta solución y una solución hash.
Lo que quiero en mi proyecto es que si hago clic en los botones ACERCA DE/CONTACTO/INICIO para representar el contenido de la página, o si hago clic en un elemento de la tarjeta, la página de las tarjetas debería mostrarse, con información sobre esa misma tarjeta.
const gridContainer = document.querySelector('.grid_container'); const routes = { '/': homePage, '/about': aboutPage, '/contact': contactPage, '/products:id': productPage }; gridContainer.innerHTML = routes[window.location.pathname]; function navigate(pathName) { window.history.pushState({}, pathName, window.location.origin + pathName); gridContainer.innerHTML = routes[pathName]; }; window.onpopstate = () => { gridContainer.innerHTML = routes[window.location.pathname]; }; function listAllProducts() { http.get(productsURL).then((products) => { ui.showProducts(products); }) } <ul class="navbar_list"> <li class="navbar_list_item"><a href="#" class="navbar_list_item_link">Home</a></li> <li class="navbar_list_item"><a href="#" onclick="navigate('/about'); return false" class="navbar_list_item_link">About</a></li> <li class="navbar_list_item"><a href="#" class="navbar_list_item_link">Contact</a></li> </ul>