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

时间:2016-07-02 22:50:49

标签: reactjs react-router react-router-redux

是否可以使用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>

1 个答案:

答案 0 :(得分:1)

你可以通过React Router实现这一目标! :)

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

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>
);

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

希望它有所帮助!