Retrieve information from a route according to the route dynamically

I have created routes to display the pages that are linked to them, I now want to retrieve this information when I am in a page.

Here is an example of a route:

const dashboardRoute = {
  id: "Dashboard",
  path: "/",
  icon: <FiLayout />,
  containsHome: true,
  component: DashboardPage,
  //guard: AuthGuard,
};

const prospectRoute = {
  id: "Prospects",
  path: "/prospects",
  icon: <FiLayers />,
  component: ProspectPage,
  //guard: AuthGuard,
};

export const sidebarRoutes = [
  dashboardRoute,
  prospectRoute,
];

I want to display for example the ID in my header, how can I do ?

const PageTitle = () => {
  return (
    <React.Fragment>
      <PageTitleContent variant="h3">Title</PageTitleContent>
    </React.Fragment>
  );
};

I tried this solution but I can’t get the routes with paramatre :

const PageTitle = () => {
  const location = useLocation();
  return (
    <React.Fragment>
      {routes.map((route) => {
        if (route.path === location.pathname) {
          return <PageTitleContent variant="h3">{route.id}</PageTitleContent>;
        }
      })}
    </React.Fragment>
  );
};

Answer

After some exchange and some questions. I went with this solution :

const PageTitleContent = styled(Typography)`
  border-left: 2px solid royalblue;
  padding-left: 10px;
`;

const PageTitle = () => {
  return Array.from(routes, function (route) {
    return (
      <Switch>
        <Route exact path={route.path}>
          <PageTitleContent variant="h3">{route.id}</PageTitleContent>
        </Route>
      </Switch>
    );
  });
};