If I navigate to a valid route (example: http://example.com/this-route) the page loads however when I refresh, the browser gets redirected to the root (example: http://example.com/). Why is this happening?

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

router.js:

const router = new Router({
  mode: 'history',
  base: '/',
  routes: [{
    path: '/',
    component: ParentComponent,
    children: [{
      // her the route has no problems with reload
        path: '',
        name: 'home',
        props: true,
        component: ChildComponent,
      },
      {
       // her the route has no problems with reload
        path: 'not-found',
        name: 'notfound',
      },
      {
       // the problem comes from the dynamic parameters
        path: ':params',
        name: 'page',
        props: true,
        component: ChildComponent,
      }
    ]
  }]
})
export default router

0 Answers