使用react-breadcrumbs-dynamic

这是完全独立于路由器的解决方案，你可以将其与任何版本的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/>

import {ThroughProvider} from 'react-through'

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

ReactDOM.render(theApp, document.getElementById('root'))

实例配置

在此示例中，

react-router

<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

separator

默认情况下，项目顺序基于URL长度。您可以根据需要覆盖排序顺序，只需在

compare

<Breadcrumbs compare={(a,b)=>a.weight-b.weight} removeProps={{weight: true}} />

如果您使用

<a>

renameProps

duplicateProps

to

href

<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

separator

undefined

item

a

finalItem

item

finalProps

{}

BreadcrumbsItem

container

span

containerProps

{}

container

compare

hideIfEmpty

false

renameProps

{}

BreadcrumbsItem

item

duplicateProps

{}

BreadcrumbsItem

item

removeProps

{}

BreadcrumbsItem

item

该

BreadcrumbsItem

through agent

to

该

BreadcrumbsItem

BreadcrumbsItem

item

finalItem

Breadcrumbs

to

...

withBreadcrumbsItem()

 功能

高级用法高级组件功能。它获得一个参数与您的自定义组件的反应和返回这将有相应的组件

breadcrumbs

item()

items()

throughAgent

this.props.breadcrumbs.item()

 和 

this.props.breadcrumbs.items()

先进的使用方法来配置您的react组件的面包屑项目。这些方法将通过

withBreadcrumbsItem

item()

items()

Dummy

Item

常数

该

through area

breadcrumbsThroughArea

包含方位键的道具名称在中定义 

breadcrumbsBearingKey

import { breadcrumbsThroughArea } from 'react-breadcrumbs-dynamic'
import { breadcrumbsBearingKey } from 'react-breadcrumbs-dynamic'