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

Question

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

假设我们有这个配置:

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'.从某处获取的标题(来自store来自storeParams或通过其他方式的id) - > MyTask(链接到'/ projects/11/999' )

我怎样才能达到这个效果？有没有最佳做法？谢谢.

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

Answer 2

使用react-router v4，所有路由都是动态的（尽管我认为仍然可以选择编写静态定义）。

正如 @tbo 在评论中提到的，react-breadcrumbs 是使用 React-router 版本 3 实现此功能的一个不错的解决方案。您描述的动态面包屑甚至还有一些解决方法（例如使用prepend或getDisplayName道具）。

本期正在进行一场对话，以确定如何最好地支持 React-router v4，这也肯定与您的问题相关。我已经挖掘了一堆其他面包屑组件存储库，这些存储库似乎都遇到了相同的静态路由问题，其中一些有类似的问题需要解决 v4 支持问题。

太长了；如果您仍在使用react-router v3，您可能可以使react-breadcrumbs包适用于动态面包屑。如果您已迁移到 v4，请继续关注，我希望很快就能得到更好的答案。

更新

在找不到适合我需求的其他解决方案后，我开发了一个解决方案，并在react-breadcrumbs存储库上打开了拉取请求。自动面包屑，如下所述，以及此讨论也是潜在的解决方案，但允许较少的定制。如果您需要更多定制，请订阅并随时发表评论或帮助处理该公关。

更新（2020）

该拉取请求已合并，react-breadcrumbs现在适用于react-router版本 4 及更高版本。