Reactjs 使用react路由器路由和共享数据源渲染子导航

我有一个大的应用程序，我很快就会切换到react router 1.x

该应用程序具有大型嵌套导航结构

/
 /page1
   /page1/option1
   /page1/option2
   /page1/option3
   /page1/option4
     /page1/option4/option1
     /page1/option4/option2
     /page1/option4/option3
 /page2
   /page2/option1
   /page2/option2
   /page2/option3
   /page2/option4

等等

在/page1上，我的子导航将是：

选项1 |选项2 |选项3 |选项4

和第/页/选项4

选项1 |选项2 |选项3

我一直在寻找一种方法，通过路由配置为子导航组件供电，因此页面只需要在一个地方定义，但到目前为止还没有找到一个示例。对于这样一个问题，通常的方法是什么？是否存在这样一个例子

更新

因此，从概念上讲，我是按照.net站点地图提供商的思路思考的，在这里，导航、面包屑路径和路由将根据页面的分层定义进行工作。我想知道react路由器的路由定义是否可以是源，或者可以从不同的源驱动，以及通常如何实现

<Route path="/" component={App}>
      <Route path="page1" component={Page1}>
         <Route path="page1/option1" component={Page1Option1} />
         <Route path="page1/option2" component={Page1Option2} />
         <Route path="page1/option3" component={Page1Option3} />
     ...

...

除了

/page1

的导航之外，您的场景中的

/page1/option4

还有子导航吗

如果是这样，您可以在需要时使用传递附加子导航组件：

<Route path="option4" components={{main: Option4, subnav: Option4SubNav}}>
   ...child routes...
</Route>

…儿童路线。。。

在一个位置定义页面是什么意思？也许一些伪代码会有帮助？@DominicTobias我试着添加一些细节。当然，如果我想有一个可重用的subnav组件，它应该总是显示当前页面的子项，这可能吗？