Ad

Possible To Mix JSX And Regular Object For Routes In React Router?

- 1 answer

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>

Ad

Answer

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>
Ad
source: stackoverflow.com
Ad