Add children Route's in a component React

Why you use react-router-dom v5?

When you use the newest version you have to add

<BrowserRouter> 

Around your complete "App"

Inside it you define

<Routes>
   <Route path="/" element={<Home />} />
   <Route path="/about" element={<About />} />
</Routes>

Note that you could have multiple auxiliary routes inside parenthesis, separated by //. for example this would define the url for a left-menu outlet:

`/lessons(aside:playlist//leftmenu:/some/path)`

for example:

const routes = [
        {path: 'a', component: ComponentA, name: 'a'},
        {path: 'b', component: ComponentB, name: 'b'},
];

//MiniApp.js
export default Vue.extend({
    beforeCreate () {
        this.$router.addChildRoutes(this.$router.currentRoute.path, routes);
    },
    template: `
<div>
  <div class="page-host">
  <router-link to="{name: 'a'}">a</router-link>
  <router-link to="{name: 'b'}">b</router-link>
  <transition name="fade" mode="out-in">
    <keep-alive><router-view class="view"></router-view></keep-alive>
  </transition>
  </div>
</div>`,
});

//The app itself
Vue.use(Router);
import MiniApp from "./MiniApp";

const config = {
    linkActiveClass: 'active',
    scrollBehavior: () => ({x: 0, y: 0}),
    routes: [
        {path: '/mini', component: MiniApp, name: 'mini'}},
    ]
};
let router = new Router(config);
const vue = new Vue({
   router,
   template: `
<div>
  <div class="page-host">
  <router-link to="/mini">a</router-link>
  <transition name="fade" mode="out-in">
    <keep-alive><router-view class="view"></router-view></keep-alive>
  </transition>
  </div>
</div>`,
}).$mount('#app');

Since the MiniApp is loaded synchronously (not lazy loaded), why not simply expose its routes and use it when creating the router? e.g.

//MiniApp.js
export const MiniAppRoutes = [
        {path: 'a', component: ComponentA, name: 'a'},
        {path: 'b', component: ComponentB, name: 'b'},
];

export default Vue.extend({...});

//////////////////////////////////////////////////////////

//The app itself
Vue.use(Router);
import MiniApp, { MiniAppRoutes } from "./MiniApp";

const config = {
    routes: [
        {path: '/mini', component: MiniApp, name: 'mini', children: MiniAppRoutes }},
    ]
};
let router = new Router(config);

e.g.

const config = {
    routes: [
        {path: '/mini', component: () => System.import('mini-app'), name: 'mini' }},
    ]
};

Tried:

this._dashboardRoutes = [
            { name: 'dashboard', path: '', component: require('../../pages/dashboard/Index.vue') },
        ];
        this._globalRoutes = [{
            path: '/',
            component: require('../../pages/DashboardWrapper.vue'),
            meta: { auth: true },
            children: this._dashboardRoutes
        }];

        this._router = new VueRouter({
            mode: 'hash',
            scrollBehavior: () => ({ y: 0 }),
            routes: this._globalRoutes,
        });

Yeah, but I think that taking an optional first parameter for the parent may be better:

// parentName is a string and must match a route's name
addRoutes([parentName, ]routes)