这是完全独立于路由器的解决方案，你可以将其与任何版本的React Router（2或3或4）或任何其他用于React的路由库一起使用，或者完全不进行路由。您只需要指定面包屑项目及其道具的组件。然而道具和部件应符合规定 分离。BreadcrumbsItem在组件和路由层次结构中的任何位置，都应在中介组件中指定道具。
基础使用
const Profile = ({user}) => (
<div>
<BreadcrumbsItem
to=`/user/${user.login}`
icon='account-box'
>
{user.firstName} {user.lastName}
</BreadcrumbsItem>
<h1>
{user.firstName} {user.lastName}
</h1>
</div>
)
安装
npm install --save react-through react-breadcrumbs-dynamic
基础配置
你已经使用声明通信通过 react tree react-through？只需添加<ThroughProvider/>到您的React组件树的根目录：
import {ThroughProvider} from 'react-through'
const theApp = (
<ThroughProvider>
<App />
</ThroughProvider>
)
ReactDOM.render(theApp, document.getElementById('root'))
实例配置
在此示例中，react-routerv4 <NavLink>用作面包屑项目：
import {Breadcrumbs} from 'react-breadcrumbs-dynamic'
const Page = (props) => (
return (
<div className="App">
<Header>
<Breadcrumbs
separator={<b> / </b>}
item={NavLink}
finalItem={'b'}
finalProps={{
style: {color: 'red'}
}}
/>
</Header>
{props.children}
<Footer>
<Breadcrumbs/>
</Footer>
</div>
)
}
请注意，item并且finalItem需要react组件（类）而不是react元素。但是separator需要反应元素。
默认情况下，项目顺序基于URL长度。您可以根据需要覆盖排序顺序，只需在compareprop中指定比较函数即可，该比较函数接收包含面包屑项prop的一对对象。例如：<Breadcrumbs compare={(a,b)=>a.weight-b.weight} removeProps={{weight: true}} />。
如果您使用<a>基于标签的项目，那么您会发现将prop映射到prop 上renameProps或 将其duplicateProps有用，如下所示： 。tohref<Breadcrumbs renameProps={{to:"href"}} />
将项目添加到面包屑
反应树中的每个路由组件通常都与路由和相应的面包屑相关联。每个组件都可以通过<BreadcrumbsItem>使用任何道具和子项进行渲染来添加其面包屑项目。
具有面包屑项目的路由组件的示例树：
import {BreadcrumbsItem} from 'react-breadcrumbs-dynamic'
const App = (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>
{props.children}
<Route exact path="/user/contacts" component={Contacts} />
</div>
)
const Contacts = (props) => (
<div>
<BreadcrumbsItem to='/user/contacts'>Contacts</BreadcrumbsItem>
<h2>Contacts</h2>
...
</div>
)
您可以通过任何方向通过反应树声明性地传递带有任何数据，函数，组件等的道具，因为 react-through 允许这样做。
结果
上面代码的结果将表示面包屑，如下所示：
<NavLink to='/'>Main Page</NavLink> <b> / </b> <NavLink to='/user'>Home</NavLink> <b> / </b> <b to='/user/contacts'>Contacts</b>
组成和功能
面包屑实例在实施Breadcrumbs部件，这是through container在以下方面 react-through。
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
separator |
元件 | undefined |
面包屑项目之间的分隔符 |
item |
零件 | a |
面包屑项目的组成部分 |
finalItem |
零件 | item道具价值 |
最终面包屑项目的组成部分 |
finalProps |
宾语 | {} |
最终道具-将覆盖中指定的 BreadcrumbsItem |
container |
零件 | span |
包装器组件 |
containerProps |
宾语 | {} |
道具container组件 |
compare |
功能 | （a，b）=> a.to.length-b.to.length | 比较功能，用于分类项目 |
hideIfEmpty |
布尔值 | false |
显示或隐藏面包屑容器（如果存在或不存在） |
renameProps |
宾语 | {} |
将道具传递的道具重命名BreadcrumbsItem为item |
duplicateProps |
宾语 | {} |
重复的道具物品传递BreadcrumbsItem到item |
removeProps |
宾语 | {} |
道具不会从道具传递BreadcrumbsItem到item |
该BreadcrumbsItem组件是through agent具有支撑力的关键。to
该BreadcrumbsItem组件可能有任何道具，也可能有孩子。的每个道具BreadcrumbsItem将传递到中的item或finalItem道具中指定的相应面包屑组件Breadcrumbs。只有一个道具是强制性的。
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
to |
串 | 需要 | 带URL的必填必填方位键 |
... |
任何 | 任何属性-将映射到对应的面包屑项目 |
withBreadcrumbsItem() 功能
高级用法高级组件功能。它获得一个参数与您的自定义组件的反应和返回这将有相应的组件breadcrumbs在其道具与方法item()，并items()像 throughAgent从react-through。
this.props.breadcrumbs.item() 和 this.props.breadcrumbs.items()
先进的使用方法来配置您的react组件的面包屑项目。这些方法将通过withBreadcrumbsItem功能HOC添加到props 。该函数item()接受一个带有props的react组件，该函数 items()接受带有子代的react组件，子组件可以包含任意数量的组件以创建相应数量的面包屑项。这些功能的面包屑项目可以是任何反应组件，而只有道具才有意义。在这种情况下，Dummy和Item组件由库导出。如果不再需要当前组件来表示任何面包屑项目，则每个函数都接受null以将面包屑项目重置为无。
常数
该through area库使用的名称在breadcrumbsThroughArea变量中定义 。
包含方位键的道具名称在中定义 breadcrumbsBearingKey。
import { breadcrumbsThroughArea } from 'react-breadcrumbs-dynamic'
import { breadcrumbsBearingKey } from 'react-breadcrumbs-dynamic'
