I've encountered a problem with setting up a fallback route to the home page on my static SPA webpage. Despite trying various solutions found online, I keep getting the CANNOT GET error when navigating to any URL other than the main one. The following URLs illustrate the issue:
- www.mywebpage.com -> This works
- www.mywebpage.com/services -> This will not work if entered directly in the browser
While navigation from the main page works fine (e.g., going from www.mywebpage.com to www.mywebpage.com/services), the issue arises because the browser is unable to locate a nonexistent page when it should be landing on the index.html file.
I attempted to address this by adding the following route configuration:
path: '/:pathMatch(.*)*',
name: 'home',
component: landing
In addition, I set up redirects as follows:
{
path: '/',
redirect: '/page-home'
},
{
path: '/index.html',
redirect: '/page-home'
},
{
path: '/page-home',
name: 'Home',
component: landing
}
The router was created using history mode:
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
mode: 'history',
routes
})