Reactjs react路由器中的路由模块化

react router有没有办法将您的路由模块化，然后导入并组装它们

因此，与此相反：

  <Router>
    <Route path="/" component={App}>
      <Route path="inbox" component={Inbox}>
        <Route path="messages/" component={AllMessages} />
        <Route path="messages/:id" component={Message} />
      </Route>
      <Route path="calendar" component={Calendar}>
        <Route path="year" component={Year}>
          <Route path="month" component={Month}>
            <Route path="week" component={Week}/>
          </Route>
        </Route>
      </Route>
    </Route>
  </Router>

你可以这样做：

let InboxRoutes = React.createClass({
  render: function(){
    return (
      <Route path="inbox" component={Inbox}>
        <Route path="messages/" component={AllMessages} />
        <Route path="messages/:id" component={Message} />
      </Route>
    );
  }
});

<Router>
    <Route path="/" component={App}>
      <InboxRoutes/>
      <CalendarRoutes/>
    </Route>
  </Router>

让InboxRoutes=React.createClass({
render:function（）{
返回(
);
}
});

我得到：

---

警告：位置与任何路由不匹配

一种解决方案是将它们包装在变量中：

let InboxRoutes = (
    <Route path="inbox" component={Inbox}>
        <Route path="messages/" component={AllMessages} />
        <Route path="messages/:id" component={Message} />
    </Route>
)

let CalendarRoutes = (/* define routes like above */)

let routes = (
    <Router>
        <Route path="/" component={App}>
            {InboxRoutes}
            {CalendarRoutes}
        </Route>
    </Router>
)

render(routes, document.getElementById("app"))

让InboxRoutes=(
)
让CalendarRoutes=（/*像上面那样定义路由*/）
让路线=(
{InboxRoutes}
{CalendarRoutes}
)
呈现（路由、文档、getElementById（“应用”））

---

注意：您应该记住输入父路由的呈现方法

{this.props.children}

如果您想按需加载路由，如果您使用Webpack，您可以自动执行此操作

以下是完整的指南：

总而言之，您应该使用getter函数设置路由，该函数将在需要时自动加载块

从“容器/应用程序”导入应用程序；
函数错误加载（err）{
控制台错误（'动态页面加载失败'，错误）；
}
功能加载路径（cb）{
返回值（module）=>cb（空，module.default）；
}
导出默认值{
组件：应用程序，
儿童路线：[
{
路径：“/”，
getComponent（位置，cb）{
系统导入（“页面/主页”）
.然后（装载路线（cb））
.捕获（错误加载）；
}
},
{
路径：“博客”，
getComponent（位置，cb）{
System.import（'页面/博客'）
.然后（装载路线（cb））
.捕获（错误加载）；
}
}
]
};是的，你可以，但它有点黑——因为react router v3的黑本质。请参见我对类似问题的回答：