javascript - Breadcrumbs and passing the path through route-config (react-router-dom)

Question

{
path: "/conversation/IntentTraining/:id",
component: CreateEntities,
exact: true,
},

I am passing this to breadcrumbs

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import useBreadcrumbs from "use-react-router-breadcrumbs";
import routeConfig from "../../router/routesConfig";
import { MDBIcon } from "mdbreact";

const Breadcrumbs = () => {
const breadcrumbs = useBreadcrumbs(routeConfig);
return (
<div className="breadcrumbs">
  {breadcrumbs.map(({ breadcrumb, match }, index) => {
    console.log("breadcrumb 12", breadcrumb.key);
    return (
      <div className="bc" key={match.url}>
        <Link to={match.url || ""}>{breadcrumb}</Link>
        {index < breadcrumbs.length - 1 && (
          <MDBIcon style={iconStyle} icon="caret-right" />
        )}
      </div>
    );
  })}
</div>
)}
export default Breadcrumbs;

Now the problem I am facing is when I go to that component it looks like:

So I want to remove the Id after the IntentTraining and along with when I click on the IntentTraining it should not be crashed.

Answer 1

等待大神答复