Javascript react路由器v6面包屑路由具有多个参数

好的，我有下面的breadcrumbs脚本，它为我的React应用程序生成breadcrumbs。在添加第二个参数之前，一切正常，如下所示。 实际的路由工作正常，只是显示面包屑

Im使用react&react路由器dom v6.4.1

抛出“键”错误

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

面包屑

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

单参数工作正常

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

我试过这个，同样的错误

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

使用2个参数，我得到的错误如下面的注释所示

我需要关于如何在我的路线中使用这两个参数而不在第二个参数上出现“key”错误的建议。谢谢

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

从“React”导入React；
从“路由分析器”导入路由；
从“react router dom”导入{Link，withRouter}；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
const isFunction=value=>typeof value==='function'；
const getPathTokens=路径名=>{
常量路径=['/']；
if（pathname=='/'）返回路径；
路径名.拆分（'/'）.reduce（（上一个，当前）=>{
常量currPath=`${prev}/${curr}`；
路径。推送（currPath）；
返回路径；
});
返回路径；
};
函数getRouteMatch（路由、路径）{
返回对象。键（路由）
.map（键=>{
const params=新路由（键）。匹配（路径）；
返回{
didMatch:params！==false，
params，
钥匙
};
})
.filter（item=>item.didMatch）[0]；
}
函数getBreadcrumbs（{routes，match，location}）{
constPathTokens=getPathTokens（location.pathname）；
返回pathTokens.map（（路径，i）=>{
const routeMatch=getRouteMatch（路由、路径）；
///////////第二参数错误
///////////未捕获的TypeError:无法读取未定义的属性“key”
const routeValue=路由[routeMatch.key]；
const name=isFunction（routeValue）
？路由值（路由匹配参数）
：routeValue；
返回{name，path}；
});
}
函数面包屑（{routes，match，location}）{
const breadcrumbs=getBreadcrumbs（{routes，match，location}）；
返回(
{' '}
{breadcrumbs.map（（breadcrumb，i）=>
{breadcrumb.name}
{i

您知道

getRouteMatch

是否返回过多个结果吗？你假设第一场比赛总是正确的，所以这可能是一个好的开始。如果您获得的匹配数超过1个，您可以只切换路由顺序，以便更具体的路由优先于不太具体的路由。在任何情况下，

路由分析器

模块的自述文件都有一个具有多个参数的示例（

/users/：id/comments/：comment/rating/：rating

）@Wex谢谢。我的路由是这样完成的{…EditDevice，路径：'/Sites/sitemdashboard/：id/SiteDevices/EditDevice/：deviceid'，exact:true}，这很好。面包屑脚本不是我自己的，所以不知道如何更改它。