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

时间:2015-10-22 12:56:42

标签: reactjs react-router react-router-component

我有一个很大的应用程序,我很快将切换到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

在/ page / option4

选项1 |选项2 |备选方案3

我一直在寻找一种从路由配置中为子导航组件供电的方法,因此页面只需要在一个地方定义,但到目前为止还没有找到一个例子。这样一个问题的正常方法是什么?这样的例子存在吗?

更新

因此,从概念上讲,我正在思考一个.net站点地图提供程序,其中导航,面包屑跟踪和路由将在页面的分层定义中起作用。我想知道反应路由器的路由定义是否可以作为源,或者是否可以从不同的源驱动,以及通常如何实现。

<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} />
     ...

1 个答案:

答案 0 :(得分:0)

您的方案中<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/mainView" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/bg_main" tools:context=".FreagmentMainCategory" > <LinearLayout android:id="@+id/lstCategoryView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_below="@+id/serviceHeaderBar" android:orientation="vertical" > <!-- The PullToRefreshListView replaces a standard ListView widget. --> <com.handmark.pulltorefresh.library.PullToRefreshListView android:id="@+id/lstCategory" android:layout_width="fill_parent" android:layout_height="match_parent" android:cacheColorHint="#00000000" android:divider="#19000000" android:dividerHeight="4dp" android:fadingEdge="none" android:fastScrollEnabled="false" android:footerDividersEnabled="false" android:headerDividersEnabled="false" android:smoothScrollbar="true" /> </LinearLayout> <RelativeLayout android:id="@+id/service_status" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:background="@drawable/progress_bg" android:orientation="vertical" android:visibility="visible" > <ProgressBar android:id="@+id/loadingBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" /> <TextView android:id="@+id/service_status_message" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="10dp" android:gravity="center_vertical" android:tag="normal" android:text="@string/title_please_wait" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="@color/BlackColor" android:textSize="@dimen/MainSize" /> </LinearLayout> </RelativeLayout> 的子导航是否在中加载 /page1/option4的导航?

如果是这样,您可以使用route's components configuration在必要时传递其他子导航组件:

/page1