Possible to mix JSX and regular object for routes in React Router?

Question

With React Router, I see here that I can define my routes as either JSX or just a normal object. I have a use case where I would like to share settingsRoutes with another part of my application as a normal object but still use JSX for the other routes. The second code block is what I was like to do. Is this mixing of JSX and objects possible with react router??

const settingsRoutes = [{
  path: 'settings',
  component: Settings,
  childRoutes: [
    {
      path: 'info',
      component: SettingsInfo
    }
  ]
}]

module.exports = settingsRoutes

var settingsRoutes = require('settingsRoutes')

<Route path='/' component={ Container }>
  <Route path='register' component={ Register } />
  <Route path='signin' component={ Signin } />
  <Route path='signout' component={ Signout } } />
  { settingsRoutes }
</Route>

Answer 1

Do this:

<Route path='/' component={ Container }>
  <Route path='register' component={ Register } />
  <Route path='signin' component={ Signin } />
  <Route path='signout' component={ Signout } } />
  <Route childRoutes={settingsRoutes} />
</Route>