React-Mounter || FlowRouter - Render components inside subroutes

help
1

ps. Im using the mantra spec to layout my app, but any generic answer that helps accomplish this helps :slight_smile:

How can I approach the following situation.

/dashboard/ => uses a main layout, that all subroutes should use and render inside of.
I also have
/dashboard/account/ uses the same layout and renders an account component

now I want a /dashboard/account/changepassword & /dashboard/account/edit route that i want to dynamically render inside the dashboard/account route

Current Route for /dashboard

FlowRouter.route('/dashboard', {
        name: 'dashboard.home',
        action() {
            mount(Layout, {
                content: () => (<DashboardHome/>)
            });
        }
    });

Current route for /dashboard/account

FlowRouter.route('/dashboard/account', {
        name: 'dashboard.account',
        action() {
            mount(Layout, {
                content: () => (<DashboardAccount/>)
            })
        }
    });

How would I be able to accomplish the need of rendering the forgotpassword or /dashboard/account/edit component INSIDE the route /dashboard/account/ and inside the <DashboardAccount/> component obviously depending on the route ?

2 
FlowRouter.route('/dashboard/account/edit', {
  name: 'dashboard.account.edit',
    action () {
      mount(Layout, {
         content: () => (<DashboardAccount />)
      });
      mount(DashboardAccount, {
        content: () => (<DashboardEdit />)
      });
    }
  });

or just:

FlowRouter.route('/dashboard/account/edit', {
  name: 'dashboard.account.edit',
    action () {
      mount(DashboardAccount, {
        content: () => (<DashboardEdit />)
      });
    }
  });