vebt-898 fixed route and pthame

src/applications/edu-benefits/10215/components/AboutPage.jsx

@@ -18,7 +18,7 @@ const AboutPage = ({ props }) => {
   return (
     <div className="vads-l-grid-container vads-u-margin-top--4">
       <div className="vads-u-margin-top--neg2p5">
-        <Breadcrumbs />
+        <Breadcrumbs pathname={props?.router?.location?.pathname} />
       </div>
       <h1>About VA Form 22-10215</h1>
       <p>
@@ -67,6 +67,9 @@ const AboutPage = ({ props }) => {
 };
 AboutPage.propTypes = {
   props: PropTypes.shape({
+    location: PropTypes.shape({
+      pathname: PropTypes.string.isRequired,
+    }).isRequired,
     router: PropTypes.shape({
       push: PropTypes.func.isRequired,
     }).isRequired,

src/applications/edu-benefits/10215/components/Breadcrumbs.jsx

@@ -1,16 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { VaBreadcrumbs } from '@department-of-veterans-affairs/web-components/react-bindings';
-import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 
-const BreadcrumbsComponent = () => {
-  const location = useLocation();
-  const { pathname } = location;
+const Breadcrumbs = ({ pathname }) => {
   const crumbs = [
     {
       href: '/',
       label: 'Home',
     },
-    ...(pathname.endsWith('/10215/')
+    ...(pathname === '/'
       ? [
           {
             href: '/find-forms/',
@@ -48,11 +46,8 @@ const BreadcrumbsComponent = () => {
     </div>
   );
 };
-
-const Breadcrumbs = () => (
-  <Router>
-    <BreadcrumbsComponent />
-  </Router>
-);
+Breadcrumbs.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
 export default Breadcrumbs;

src/applications/edu-benefits/10215/components/CalculationInstructions.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import NeedHelp from './NeedHelp';
-import BreadcrumbInstructionPage from './Breadcrumbs';
+import Breadcrumbs from './Breadcrumbs';
 
-export const CalculationInstructions = () => {
+export const CalculationInstructions = ({ props }) => {
   return (
     <div className="vads-l-grid-container vads-u-margin-top--4">
       <div className="desktop-lg:vads-u-padding-left--0">
-        <BreadcrumbInstructionPage />
+        <Breadcrumbs pathname={props?.router?.location?.pathname} />
       </div>
       <h1 className="vads-u-margin-top--2">
         Calculation instructions for VA Form 22-10215: Statement of Assurance of
@@ -245,3 +246,13 @@ export const CalculationInstructions = () => {
     </div>
   );
 };
+
+CalculationInstructions.propTypes = {
+  props: PropTypes.shape({
+    router: PropTypes.shape({
+      location: PropTypes.shape({
+        pathname: PropTypes.string,
+      }),
+    }),
+  }),
+};

src/applications/edu-benefits/10215/containers/App.jsx

@@ -20,7 +20,7 @@ export default function App({ location, children }) {
   return (
     <div className="form-22-10215-container">
       <div className="vads-u-padding-left--0">
-        <Breadcrumbs />
+        <Breadcrumbs pathname={location.pathname} />
       </div>
       <RoutedSavableApp formConfig={formConfig} currentLocation={location}>
         {children}

src/applications/edu-benefits/10215/routes.jsx

@@ -8,7 +8,7 @@ import AboutPage from './components/AboutPage';
 const route = [
   {
     path: '/calculation-instructions',
-    component: CalculationInstructions,
+    component: props => <CalculationInstructions props={props} />,
   },
   {
     path: '/',