使用反应路由器的动态面包屑

Question

react-router repo 的示例文件夹中有一个很好的例子，说明如何在现场制作面包屑。但我想知道如何用动态路线制作面包屑。

假设我们有这样的配置：

 ReactDOM.render((
<Router history={browserHistory}>
    <Route path="/projects" component={ProjectsApp}>
        <IndexRoute component={ProjectsDashboard} />
        <Route path=":projectId" component={ProjectBoard}>
            <Route path=":taskId" component={ProjectTaskBoard}>
        </Route>
    </Route>
</Router>
), document.getElementById('app'));

我想做这样的事情：

项目（链接到“/projects”）-> MyAwesomeProject（链接到“/projects/11”。标题取自某处（通过 id 来自 routeParams 或其他方式的商店））-> MyTask（链接到“/projects/11” /999’)

我怎样才能达到这个结果？有没有最佳实践？谢谢。

原文由 Yaroslav Melnichuk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我们使用包 react-breadcrumbs-dynamic 这是最

灵活适用于任何路由器（包括 react-router v4）。

 import {
  BreadcrumbsProvider,
  Breadcrumbs,
  BreadcrumbsItem
} from 'react-breadcrumbs-dynamic'

const theApp = (
  <BreadcrumbsProvider>
    <App />
  </BreadcrumbsProvider>
)

const App = (props) => (
  return (
    <div className="App">
      <Breadcrumbs/>
      {props.children}
    </div>
  )
}

const Page = (props) => (
  <div>
    <BreadcrumbsItem to='/'>Main Page</BreadcrumbsItem>
    {props.children}
    <Route exact path="/user" component={User} />
  </div>
)

const User = (props) => (
  <div>
    <BreadcrumbsItem to='/user'>Home</BreadcrumbsItem>
    <h2>Home</h2>
  </div>
)

回购协议在这里： react-breadcrumbs-dynamic

原文由 Alex 发布，翻译遵循 CC BY-SA 3.0 许可协议