React 路由将子路由移动到单独的模块？

Question

是否可以使用 React Route 执行以下操作？

主要

  <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

你可以用 React Router 来实现！ :)

但我建议您查看配置路由的“普通路由”方式：

https://github.com/ReactTraining/react-router/blob/v2.8.1/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>
);

我不知道你用的是什么版本的 React Router，但你可以在任何版本中实现，但是，作为建议，请尝试使用最新版本。因为它处理很多很酷的东西。

希望对您有所帮助！

React 路由将子路由移动到单独的模块？

React routes move sub-routes to separate module?

reactjs

react-router

react-router-redux