Server render cannot get the nested route string

Question

When I visit /m/song, the htmlstring only contains Layouts component

htmlstring = renderToString(
    <Provider store={store}>
        <StaticRouter location={ctx.url} context={context}>
            {renderRoutes(routesConfig)}
        </StaticRouter>
    </Provider>
);


const routesConfig = [{
    component: Layouts,
    routes:[{path: '/m/song', componentName: 'Song', component: Song}]
    …

The htmlstring should contanin both Layouts and Song components.

Answer 1

Are you including the following in the render of your 'Layout' component? {renderRoutes(routesConfig.routes)}

As per documentation, npmjs.com/package/react-router-config, child routes ('Song' in your case) won't render without this line.