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

Posted 2023-02-21

【中文标题】反应路线将子路线移动到单独的模块？

【英文标题】：React routes move sub-routes to separate module?

【发布时间】：2016-11-05 00:40:54

【问题描述】：

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

您可以使用 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-router 版本？

是的，刚刚测试过了，谢谢github.com/alikor/spike-react-routes