可能在React Router中爲路由混合使用JSX和常規對象？

Question

使用React路由器，我看到here，我可以將我的路由定義爲JSX或只是普通對象。我有一個用例，我想與我的應用程序的另一部分分享settingsRoutes作爲普通對象，但仍將JSX用於其他路線。第二個代碼塊是我想要做的。 JSX和對象可能與反應路由器混合嗎？

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

這樣做：

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