javascript - Add children Route's in a component React - TagMerge
4Add children Route's in a component ReactAdd children Route's in a component React

Add children Route's in a component React

Asked 1 years ago
1
4 answers

First issue is that the root route is only rendered when it exactly matches "/login", so if the URL/path becomes "/login/dados" it no longer matches exactly and Login is unmounted.

Remove the exact prop on the root Route component so subroutes/nested routes can be matched and rendered.

Login.js

<Router>  
  <Route path="/login" component={Login} />
</Router> 

Second issue, the Router inclusively (means anything that matches is rendered) matches and renders routes, this is likely why you are trying to use the exact prop on all the nested routes. Use a Switch component to exclusively (only the first match is rendered) a route. While you could continue using the exact prop on all nested routes, it's simpler to render them into a Switch in descending order of path specificity (i.e. more specific paths before less specific paths).

LoginForm.js

<Switch>
  <Route path="/login/dados" component={DadosPessoais} /> 
  <Route path="/login" component={Default} />
</Switch>

Source: link

0

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>

Source: link

0

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)`

Source: link

0

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)

Source: link

Recent Questions on javascript

    Programming Languages