I am trying to make routing on a SPA project, but for some reason it says that my function is undefined. I am new to this so I might overlooked something, I have searched all over the internet and I found this solution and a hash solution.
What I want on my project is that if I click on ABOUT/CONTACT/HOME buttons to render its page content, or if I click on a card item, the cards page should render, with information about that same card
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>