用面包屑反应路由器

Question

我正在将此库用于面包屑here。目前，路由配置采用这种方式：

const rootRoute = {
path: __BASENAME__,
component: Base,
childRoutes: [
{
  component: Home,
  childRoutes: [
    {
      path: 'main',
      component: MainDashboard,

    },{
      path: 'sc',
      component: Second,

    }


  ]
 }
]
}

我希望面包屑看起来像这样：Main Dashboard > Second。我怎么做？我在main页面上也有一个按钮组件，其代码如下：

function navigate(props, param) {
    if (param)

        props.router.push({ pathname: "/" + param, state: { screen: param } });
}

我在base_path='/main'主页上有此代码：

<BreadcrumbsItem to={base_path}>Dashboard</BreadcrumbsItem>

，在第二部分： <BreadcrumbsItem to={base_path+'/sc'}>Second</BreadcrumbsItem>

app.jsx

render(
  <Provider store={store}>
    <BreadcrumbsProvider>
      <Router history={browserHistory} routes={routes} />
    </BreadcrumbsProvider>  
  </Provider>,
  document.getElementById('dashboard-app')
)

如何确保面包屑按此顺序显示？