child routes seem not to work

[Dmitry-N-Medvedev]

The following code in will never hit the /:cid subpath:

export default {
  path: '/clients',
  action: () => <Clients />,
  children: [
    {
      path: '/:cid',
      action(context) {
        console.log('action /:cid');
        return context.params.cid;
      }
    }
  ]
};

[koistya]

@Dmitry-N-Medvedev resolve(routes, { path: '/clients/123' })?

[Dmitry-N-Medvedev]

I'm using react-starter-kit... Do I require to make changes to it to have child routes operational?

[koistya]

Child routes should work in react-starter-kit out of the box. I will test your use case in RSK..

[boonep]

Any word on this? I've come across the same issue with RSK. Thanks!

[dreambo8563]

I got the same issue, children router not working

[chilic]

I found solution:
Parent route should be like

export default {
  path: '/parent',

  async action({ next }) {
    const component = await next();
    return component;
  },

  children: [
    {
      path: '/', // Same as "/parent"
      action: async () => <ParentComponent />,
    },
    childRoute, // Will be "/parent/child"
  ],
};

[dreambo8563]

@chilic not working for me:

export default {

  path: '/contact',

  async action() {
    const Contact = await new Promise((resolve) => {
      require.ensure([], (require) => resolve(require('./Contact').default));
    });


    return <Contact />;
  },
  children: [
    {
      path: '/', // Same as /parent
      action: () => <Contact />,
    },
    {
      path: '/contact/name', // Same as /parent
      action: async () => {
        console.log('in name router')
        return <h1>good</h1>
      },
    },
  ],

};

[chilic]

@dreambo8563
Look at action method:

  async action({ next }) {
    const component = await next();
    return component;
  },

[dreambo8563]

@chilic you save my world

this works

export default {

  path: '/contact',

  // async action() {
  //   const Contact = await new Promise((resolve) => {
  //     require.ensure([], (require) => resolve(require('./Contact').default));
  //   });


  //   return <Contact />;
  // },
  async action({ next }) {
    const component = await next();
    return component;
  },
  children: [
    {
      path: '/', // Same as /parent
      action: () => <Contact />,
    },
    {
      path: '/name',
      action: async () => {
        console.log('in name router')
        return (
          <div>
            <h1>good</h1>
            <Contact />
          </div>
        )
      },
    },
  ],

};

[frenzzy]

This should be fixed, please reopen if necessary.

[vishwanatharondekar]

Solution given by @chilic works but this needs to be solved. I guess for this to work, child route must be resolved before parent route, when both child and parent routes are available.

[frenzzy]

The right way here is:

const routes = {
  path: '/users', // base url
  children: [
    {
      path: '/', // main page
      action() { return 'User List' }
    },
    {
      path: '/:id', // child page
      action(context) { return `User #${context.params.id}` }
    },
  ]
};

Playground: https://jsfiddle.net/frenzzy/o50uu79q/

[vishwanatharondekar]

@frenzzy Above solution given works as expected. It will be great if we could get a warning that children route and parent action are available together. Easy to do this mistake for user of the router.