Multiple Body Components

Explanation

The body property of a response doesn't have to be a single component/function; the body can be anything you want it to be.

For example, you might want to provide the main and menu content for a route.

response() {
  return {
    body: {
      main: MainComponent,
      menu: MenuComponent
    }
  };
}

Another use case is when you have multiple routes that may share the same root component, but may have different nested components. If the root has state that you want preserved when navigating, rendering a common root component means that React will re-use the existing component.

response() {
  return {
    body: {
      // multiple routes may use this root
      root: StatefulComponent,
      content: MainComponent
    }
  };
}
Note: One thing to remember when attaching multiple components to a route is that all of your routes should have the same structure. Otherwise, when you render you will have to adapt your code to deal with different response.body layouts.
// be consistent, don't use
// different body types
const routes = prepareRoutes([
  {
    ...,
    response() {
      return {
        body: OneLayout
      };
    }
  },
  {
    ...,
    response() {
      return {
        body: { another: Layout }
      };
    }
  }
]);

Live Demo

Use the three buttons at the top of the Sandbox to toggle view modes. Clicking the menu button in the top left corner opens a menu to switch between files.

On GitHub

If you want to run this code locally, the source code is available on GitHub here.