React-static: mixed children route is not loading the one with .map

[achenwei-chwy]

I have a route defined like following

{
        path: '/posts',
        component: 'src/containers/PostPage',
        getProps: () => ({
          posts,
        }),
        children: [
          {
            path: '/all',
            component: 'src/containers/PostListingPage',
          },
          posts.map(post => ({
            path: `/detail/${post.route.name}`,
            component: 'src/containers/PostPage',
            getProps: () => ({
              postRef: post.route.name,
            }),
          }))
        ],
      },

the first child route /all works, but the 2nd route that is defined with posts.map is not. it will just show a blank page when its there. Do I need to define children a bit differently when its mixed children route like this? Thanks!

[EmilTholin]

Hi @adamchenwei! I think the issue is that you get an array inside of an array. Try this:

children: [
  {
    path: '/all',
    component: 'src/containers/PostListingPage',
  },
  ...posts.map(post => ({
    path: `/detail/${post.route.name}`,
    component: 'src/containers/PostPage',
    getProps: () => ({
      postRef: post.route.name,
    }),
  }))
],

[achenwei-chwy]

ahh, gotcha, I should have use the spread operator to combine the array.. thanks for the lightening fast reply!

[achenwei-chwy]

This actually can be nice to be in the document 👍