反应路线将子路线移至单独的模块？

Madu Alikor 发表于 Dev

lik蜜

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>

威廉·马丁斯

您可以使用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，但是您可以在任何版本中实现，但是建议您尝试使用最新版本。由于它可以处理很多很酷的东西。

希望能帮助到你！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。