реагировать на маршрутизацию хлебных крошек маршрутизатора v6 с несколькими параметрами - PullRequest
Новая
       17

реагировать на маршрутизацию хлебных крошек маршрутизатора v6 с несколькими параметрами

0 голосов
/ 06 февраля 2020

Хорошо, у меня есть следующий скрипт хлебных крошек, который генерирует хлебные крошки для моего приложения React. Все работает нормально, пока я не добавлю второй параметр, как показано ниже. Фактическая маршрутизация работает нормально, это просто отображение хлебных крошек.

Я использую реагировать и реагировать на маршрутизатор dom v6.4.1

выдает ошибку «ключа» 

/Sites/SiteDashboard/${this.props.match.params.id}/SiteDevices/EditDevice/${row.id}

Breadcrumb 

/Sites/SiteDashboard/:id/SiteDevices/EditDevice/:deviceid

одиночные параметры работают нормально 

'/Sites/SiteDashboard/:id': params => params.id,

пробовал это, та же ошибка 

'/SiteDevices/:deviceid': params => params.deviceid,

с 2 параметрами Я получаю ошибку, как показано в комментариях ниже ...

Мне нужен совет о том, как использовать 2 параметра в моем маршруте без получения этой «ключевой» ошибки для второго параметра. Спасибо. 

import React from 'react';
import Route from 'route-parser';
import { Link, withRouter } from 'react-router-dom';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const isFunction = value => typeof value === 'function';
const getPathTokens = pathname => {
  const paths = ['/'];

  if (pathname === '/') return paths;

  pathname.split('/').reduce((prev, curr) => {
    const currPath = `${prev}/${curr}`;
    paths.push(currPath);
    return currPath;
  });

  return paths;
};

function getRouteMatch(routes, path) {
  return Object.keys(routes)
    .map(key => {
      const params = new Route(key).match(path);
      return {
        didMatch: params !== false,
        params,
        key
      };
    })
    .filter(item => item.didMatch)[0];
}

function getBreadcrumbs({ routes, match, location }) {
  const pathTokens = getPathTokens(location.pathname);
  return pathTokens.map((path, i) => {
    const routeMatch = getRouteMatch(routes, path);
    ///////////second params error
    ///////////Uncaught TypeError: Cannot read property 'key' of undefined
    const routeValue = routes[routeMatch.key];
    const name = isFunction(routeValue)
      ? routeValue(routeMatch.params)
      : routeValue;
    return { name, path };  
  });
}

function Breadcrumbs({ routes, match, location }) {
  const breadcrumbs = getBreadcrumbs({ routes, match, location });

  return (
    <div>
      {' '}
      {breadcrumbs.map((breadcrumb, i) =>
        <span key={breadcrumb.path}>
          <Link to={breadcrumb.path}>
            {breadcrumb.name}
          </Link>
          {i < breadcrumbs.length - 1 ?  <FontAwesomeIcon icon={['fas', 'caret-right']} />  : ''}
        </span>
      )}
    </div>
  );
}

export default withRouter(Breadcrumbs);
...