Updates routes in breadcrumbs so they no longer use the render prop

awx/ui_next/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -7,7 +7,8 @@ import {
   BreadcrumbItem,
   BreadcrumbHeading,
 } from '@patternfly/react-core';
-import { Link, Route, withRouter } from 'react-router-dom';
+import { Link, Route, withRouter, useRouteMatch } from 'react-router-dom';
+
 import styled from 'styled-components';
 
 const PageSection = styled(PFPageSection)`
@@ -15,18 +16,15 @@ const PageSection = styled(PFPageSection)`
   padding-bottom: 10px;
 `;
 
-const Breadcrumbs = ({ breadcrumbConfig }) => {
+const Breadcrumbs = ({ breadcrumbConfig, match }) => {
   const { light } = PageSectionVariants;
 
   return (
     <PageSection variant={light}>
       <Breadcrumb>
-        <Route
+        <Route path="/:path">
-          path="/:path"
+          <Crumb breadcrumbConfig={breadcrumbConfig} match={match} />
-          render={props => (
+        </Route>
-            <Crumb breadcrumbConfig={breadcrumbConfig} {...props} />
-          )}
-        />
       </Breadcrumb>
     </PageSection>
   );
@@ -51,15 +49,17 @@ const Crumb = ({ breadcrumbConfig, match }) => {
     crumbElement = null;
   }
 
+  function NextCrumb() {
+    const routeMatch = useRouteMatch();
+    return <Crumb breadcrumbConfig={breadcrumbConfig} match={routeMatch} />;
+  }
+
   return (
     <Fragment>
       {crumbElement}
-      <Route
+      <Route path={`${match.url}/:path`}>
-        path={`${match.url}/:path`}
+        <NextCrumb />
-        render={props => (
+      </Route>
-          <Crumb breadcrumbConfig={breadcrumbConfig} {...props} />
-        )}
-      />
     </Fragment>
   );
 };