web-dev-qa-db-fra.com

Comment créer un fil d'Ariane react-router v4?

Comment créer un fil d'Ariane react-router v4? J'ai essayé de poser cette question sur le site Web de réag-routeur V4 via un ticket de problème. Ils ont juste dit de voir les chemins récursifs exemple. Je veux vraiment le créer dans semantic-ui-react

react-router-v4
13
Monty

J'étais après la même chose et votre question m'a orienté dans la bonne direction.

Cela a fonctionné pour moi:

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>
)
12
Felipe Taboada

J'ai utilisé semantic-ui-react pour mon propre projet et ceci pour créer des chapelures basées sur 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}/>;
};
4
jimmy

Cela peut être fait en utilisant un HOC qui analyse la pathname de react-router et retourne les correspondances. Bien qu’un peu plus verbeux, je pense que cela donne une plus grande flexibilité et un tableau d’objets de confection de chapelure lisible et agréable.

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

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

4
Justin Schrader

Le problème avec ces deux approches est que vous ne pouvez utiliser que le nom du chemin dans la piste de navigation. en d'autres termes, vous devez lier votre itinéraire aux noms de présentation de votre parcours.

4
Adam Donahue

De react-router doc: les <Route> composants rendent certains de vos composants lorsqu'un emplacement correspond au chemin de la route, comme ceci:

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

La responsabilité de base des informations est disponible pour le composant rendu qui est <Topic> dans ce cas. Il sait comment récupérer des données ou il a déjà un état de redux lié, etc. Donc, <Topic> simple instancie l'agent d'élément de chapiteau et lui transmet les données requises comme ceci:

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>
)

C'est tout. Exemple plus complet dans cette réponse . Ici live demo .

1
user394010

Essayez cette solution simple:

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>
)

Votre 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; }

Ensuite, utilisez-le comme ceci:

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

Bonne codage!

0
TechyTimo