如何创建react-router v4面包屑？

Question

如何创建react-router v4 breadcrumbs？我试着通过问题票据在反应路由器V4网站上提出这个问题。他们只是说看到recursive paths的例子。我真的想在semantic-ui-react

Answer 1

中创建它我是在相同的事情和你的问题指出我在正确的方向。

这为我工作：

const Breadcrumbs = (props) => (
    <div className="breadcrumbs"> 
     <ul className='container'> 
      <Route path='/:path' component={BreadcrumbsItem} /> 
     </ul> 
    </div> 
) 

const BreadcrumbsItem = ({ ...rest, match }) => (
    <span> 
     <li className={match.isExact ? 'breadcrumb-active' : undefined}> 
      <Link to={match.url || ''}> 
       {match.url} 
      </Link> 
     </li> 
     <Route path={`${match.url}/:path`} component={BreadcrumbsItem} /> 
    </span> 
) 

Answer 2

我用semantic-ui-react为我自己的项目，这样做是为了根据location.pathname创建路径;

export default (props) => { 
    const paths = props.pathname.split('/').map((p, i, arr) => { 
     if (i === 0) return { 
      key: i, 
      content: (<Link to={'/'}>home</Link>), 
      active: (i === arr.length - 1), 
      link: (i < arr.length - 1) 
     }; 

     if (i === arr.length - 1) return { 
      key: i, 
      content: p, 
      active: (i === arr.length - 1) 
     }; 

     return { 
      key: i, 
      content: (<Link to={`${arr.slice(0, i + 1).join('/')}`}>{p}</Link>), 
      active: (i === arr.length - 1), 
      link: (i < arr.length - 1)} 
     }; 
    ); 
    return <Breadcrumb icon='chevron right' sections={paths}/>; 
}; 

Answer 3

这两种方法的问题是，您仅限于在面包屑路径中使用路径名;也就是说，您必须将您的路由绑定到路径的演示文稿名称。

Answer 4

试试这个简单的解决方案：

const Breadcrumbs = ({ ...rest, match }) => (
    <span> 
     <Link to={match.url || ''} className={match.isExact ? 'breadcrumb active' : 'breadcrumb'}> 
      {match.url.substr(match.url.lastIndexOf('/')+1, match.url.length)} 
     </Link> 
     <Route path={`${match.url}/:path`} component={Breadcrumbs} /> 
    </span> 
) 

你的CSS：

.breadcrumbs { 
    background: #fff; 
    margin-bottom: 15px; 
} 
.breadcrumb { 
    margin-bottom: 0; 
    line-height: 2.5; 
    display: inline-block; 
} 
.breadcrumb::before { 
    display: inline-block; 
    padding-right: 5px; 
    padding-left: 5px; 
    color: #818a91; 
    content: "/"; } 
.breadcrumb.active { 
    color: #818a91; } 

然后使用它是这样的：

<div className="container-fluid breadcrumbs"> 
    <Route path='/:path' component={Breadcrumbs} /> 
</div> 

编码愉快！

Answer 5

这可以使用HOC来解析pathname来自react-router并返回与它匹配的匹配。虽然稍微详细一点，但我认为它提供了更大的灵活性和一个可读的面包屑配置对象数组。

Breadcrumbs.jsx

import React from 'react'; 
import { NavLink } from 'react-router-dom'; 
import { withBreadcrumbs } from 'withBreadcrumbs'; 

const UserBreadcrumb = ({ match }) => 
    <span>{match.params.userId}</span>; // use match param userId to fetch/display user name 

const routes = [ 
    { path: 'users', breadcrumb: 'Users' }, 
    { path: 'users/:userId', breadcrumb: UserBreadcrumb}, 
    { path: 'something-else', breadcrumb: ':)' }, 
]; 

const Breadcrumbs = ({ breadcrumbs }) => (
    <div> 
    {breadcrumbs.map(({ breadcrumb, path, match }) => (
     <span key={path}> 
     <NavLink to={match.url}> // wrap breadcrumb with semantic-ui element 
      {breadcrumb} 
     </NavLink> 
     <span>/</span> 
     </span> 
    ))} 
    </div> 
); 

export default withBreadcrumbs(routes)(Breadcrumbs); 

withBreadcrumbs.js

import React from 'react'; 
import { matchPath, withRouter } from 'react-router'; 

const renderer = ({ breadcrumb, match }) => { 
    if (typeof breadcrumb === 'function') { return breadcrumb({ match }); } 
    return breadcrumb; 
}; 

export const getBreadcrumbs = ({ routes, pathname }) => { 
    const matches = []; 

    pathname 
    .replace(/\/$/, '') 
    .split('/') 
    .reduce((previous, current) => { 
     const pathSection = `${previous}/${current}`; 

     let breadcrumbMatch; 

     routes.some(({ breadcrumb, path }) => { 
     const match = matchPath(pathSection, { exact: true, path }); 

     if (match) { 
      breadcrumbMatch = { 
      breadcrumb: renderer({ breadcrumb, match }), 
      path, 
      match, 
      }; 
      return true; 
     } 

     return false; 
     }); 

     if (breadcrumbMatch) { 
     matches.push(breadcrumbMatch); 
     } 

     return pathSection; 
    }); 

    return matches; 
}; 

export const withBreadcrumbs = routes => Component => withRouter(props => (
    <Component 
    {...props} 
    breadcrumbs={ 
     getBreadcrumbs({ 
     pathname: props.location.pathname, 
     routes, 
     }) 
    } 
    /> 
)); 

开源HOC也可以在这里找到： https://github.com/icd2k3/react-router-breadcrumbs-hoc

Answer 6

从react-router DOC：在<Route> componens被渲染你的一些部件时的位置与路线的路径相匹配这样的：

<Route path={`${match.url}/:topicId`} component={Topic}/> 

基本责任的信息可用于渲染其及部件在这种情况下<Topic>。它知道如何获取数据或者已经绑定了redux状态等等。所以<Topic>简单的实例化breadcrums项目代理，并通过所需要的数据，以这样的：

import {BreadcrumbsItem} from 'react-breadcrumbs-dynamic' 

const Topic = ({ match, topic }) => (
    <div> 
    <h3> 
     {topic.title} 
    </h3> 

    <BreadcrumbsItem to={`${match.url}/${match.params.topicId}`}> 
     {topic.title} 
    </BreadcrumbsItem> 

    ... 
    </div> 
) 

这就是全部。在this answer更全的例子。这里住demo。