使用反应路由器的动态面包屑 [英] Dynamic breadcrumbs using react router

问题描述

有一个很好的例子来说明如何制作 站点上的面包屑在 react-router repo 的示例文件夹中.但我想知道如何使用动态路由制作面包屑.

假设我们有这样的配置:

ReactDOM.render((<路由器历史={browserHistory}><Route path="/projects" 组件={ProjectsApp}><IndexRoute 组件={ProjectsDashboard}/><Route path=":projectId" component={ProjectBoard}><Route path=":taskId" component={ProjectTaskBoard}></路线></路线></路由器>), document.getElementById('app'));

我想做这样的事情:

Projects(link to '/projects') -> MyAwesomeProject (link to '/projects/11'.标题取自某处(从 store by id from routeParams 或其他方式) -> MyTask (link到'/projects/11/999')

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

解决方案

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

适用于任何路由器(包括 react-router v4).

import {面包屑提供者，面包屑，面包屑项目来自'反应面包屑动态'const theApp = (<面包屑提供者><应用程序/></BreadcrumbsProvider>)const App = (props) =>(返回 (<div className="应用程序"><面包屑/>{props.children}

)}const Page = (props) =>(<div><BreadcrumbsItem to='/'>主页</BreadcrumbsItem>{props.children}<路由精确路径="/user" component={User}/>

)const 用户 = (道具) =>(<div><BreadcrumbsItem to='/user'>首页</BreadcrumbsItem><h2>家</h2>

)

repo 在这里:react-breadcrumbs-dynamic

There is very good example of how to make a breadcrumbs on site in examples folder of react-router repo. But I'm wondering how to make breadcrumbs with dynamic routes.

Assume we have this configuration:

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'));

I want to make something like this:

Projects(link to '/projects') -> MyAwesomeProject (link to '/projects/11'. Title taken from somewhere (from store by id from routeParams or by another way)) -> MyTask (link to '/projects/11/999')

How can I achieve this result? Are there any best practices? Thanks.

解决方案

We use the package react-breadcrumbs-dynamic which is most

flexible for any router (included 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>
)

The repo is here: react-breadcrumbs-dynamic

这篇关于使用反应路由器的动态面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！