如何创建react-router v4 breadcrumbs？

Question

如何创建react-router v4 breadcrumbs？我尝试通过问题单在react-router V4网站上提出这个问题.他们只是说看到递归路径的例子.我真的想用语义 - 反应来创建它

Answer 1

我追求同样的事情,你的问题指出了我正确的方向.

这对我有用:

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

const BreadcrumbsItem = ({ match, ...rest }) => (
    <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

这可以使用HOC来完成，该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