reactjs - 使用 react 路由器的动态面包屑

Question

有一个很好的例子说明如何制作 breadcrumbs on site in examples folder of 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(链接到'/projects') -> MyAwesomeProject (链接到'/projects/11'。标题取自某处(通过来自routeParams的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