HELP: Vue-Router throwing Warning for Empty Initial Location

[lilz-sofia]

Hi, I'm trying to migrate my app from vue2 to vue3, so I had to update my vue-router to 4.x too.
In my application the router is mostly through SSR. I'm using vue-router only for routing inside my modals (i.e in-app routing).
As I don't want my urls to be changed, I used to use abstract mode, which I had to change to createMemoryHistory.
This is my code for router:

import { createRouter, createMemoryHistory } from 'vue-router'

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    {
      path: "/pathA",
      name: "A",
      component: componentA,
      props: true,
      meta: { step: 1 },
    },
    {
      path: "/pathB",
      name: "B",
      component: componentB,
      props: true,
      meta: { step: 2 },
    },
  ]
})

export default router;

In the main.js, I just wrote app.use(router) before mounting.
I followed the migration guide as it is, but now I'm facing this warning:

As I read the documentation, I came to realize it is probably because of this following:
https://router.vuejs.org/guide/migration/#All-navigations-are-now-always-asynchronous

The initial location is getting nothing, as I don't push any route to the router until I open my modal. How can I handle this issue in a graceful way?
I tried to create a fallback path in my route like below:

{
    path: '/', // This route will catch the initial empty path
    name: 'empty-route',
    component: { render: () => null },
  }

But that throws another warning from vue about rendering deprecation:

Has anyone faced this problem before? I'm stuck with this problem for few day and would really appreciate some help 🙏

[s3xysteak]

To define a empty component, try:

{
  path: '/',
  name: 'empty-route',
  component: defineComponent(() => () => h('div'))
}

or a functional component:

const Empty = () => h('div')
Empty.displayName = 'Empty'

const route = [
  {
    path: '/',
    name: 'empty-route',
    component: Empty
  }
]