反應路線將子路線移動到單獨的模塊？

Question

是否有可能通過反應路線來處理以下內容？

主要

<Routes handler={App}> 
    <Profile path="profile" /> 
    <Explore path="explore" /> 
    </Routes> 

檔案

<Route> 
     <Route name="dashboard" handler={ProfileDashboard} /> 
     <Route name="repos" handler={ProfileRepos} /> 
    </Route> 

探索

<Route> 
     <Route name="home" handler={ExploreHome} /> 
     <Route name="showcase" handler={ExploreShowcase} /> 
    </Route> 

Answer 1

可以實現與陣營路由器！ :)

但我建議你檢查出來的「普通路由」的方式來配置你的路線：

https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md#configuration-with-plain-routes

利用這一點，你就會開始一個routes對象的工作，你可以只需require其他路線並根據這些組合創建您的路線。類似的東西：

const routes = { 
    path: '/', 
    component: App, 
    childRoutes: [ 
     require('./profile'), 
     require('./explore') 
    ] 
} 

然後在你profile.js（你可以在同一做到explore.js）文件，你將有類似的東西：

/* Import the ProfileDashboard and ProfileRepos here */ 

const profileRoutes = { 
    path: 'profile', 
    childRoutes: [{ 
     path: 'dashboard', 
     component: ProfileDashboard 
    }, { 
     path: 'repos', 
     component: ProfileRepos 
    }] 
}; 

而且這種方式可以實現你想要的。

如果你真的不能使用普通的路線，你可以做這樣的事情：

<Route path="/" component={App}> 
    { require('./profile') } 
    { require('./explore') } 
</Route> 

而你profile.js，例如：

module.exports = (
    <Route path="profile"> 
     <Route path="dashboard" component={ProfileDashboard} /> 
     <Route path="dashboard" component={ProfileRepos} /> 
    </Route> 
); 

我不知道是什麼陣營路由器版本，但您可以在任何版本中實現該版本，但作爲建議，請嘗試使用最新的版本。因爲它處理很多很酷的東西。

希望它有幫助！