Dynamique de la chapelure à l'aide de réagir routeur

Avec réagissent-routeur v4, toutes les routes sont dynamiques (bien que je pense qu'il y a toujours des options à écrire des définitions statiques).

Comme mentionné par @tbo y commenter, réagir-de la chapelure était un ok de solution pour la mise en œuvre de ce avec la version 3 de réagir-routeur. Il y avait même quelques solutions de contournement pour la dynamique de la chapelure que vous décrivez (en utilisant par exemple l' prepend ou getDisplayName accessoires).

Il y a une conversation en cours dans ce numéro afin de déterminer la meilleure façon de soutenir réagir-routeur v4 qui certainement des liens dans votre question. J'ai creusé à travers un tas d'autres chapelure composant référentiels qui semblent tous de la lutte à partir avec la même route statique problèmes, certains ayant même des questions ouvertes pour comprendre v4.

TLDR; Si vous êtes encore à réagir-routeur v3, vous pouvez probablement le faire réagir la-de la chapelure paquet de travail pour la dynamique de la chapelure. Si vous avez migré vers v4, restez à l'écoute et j'espère avoir une meilleure réponse bientôt.

Mise à jour:

Après ne pas trouver d'autres solutions qui répondent à mes besoins, j'ai développé une solution et a ouvert un pull request sur la réaction de la chapelure référentiel. Auto-fil d'ariane, comme mentionné ci-dessous, et cette discussion sont aussi des solutions possibles mais de permettre de moins de personnalisation. Si vous avez besoin de plus d'options de personnalisation, de s'abonner et de se sentir libre de commenter ou de l'aide avec le pr.

Il y a plusieurs façons de le faire, et plusieurs solutions open-source (voir les réponses ici: Comment puis-je créer réagir-routeur v4 chapelure?)

Personnellement, je préfère un HOC solution en raison de la faible superficie, le rendu de la flexibilité, et lisible sur le fil d'ariane de l'itinéraire config.

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}>
          {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,
      })
    }
  />
));

Open-source HOC est également disponible ici:
https://github.com/icd2k3/react-router-breadcrumbs-hoc