Big progress!

client/src/pages/bills/bills.page.component.jsx

@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import BillDeleteButton from "../../components/bill-delete-button/bill-delete-button.component";
 import PartsOrderModalContainer from "../../components/parts-order-modal/parts-order-modal.container";
 import PrintWrapperComponent from "../../components/print-wrapper/print-wrapper.component";
@@ -31,7 +31,7 @@ export function BillsListPage({
   setPartsOrderContext,
   setBillEnterContext,
 }) {
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const { page } = search;

client/src/pages/bills/bills.page.container.jsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import BillDetailEditContainer from "../../components/bill-detail-edit/bill-detail-edit.container";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
@@ -22,7 +22,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, searchObj } = searchParams;
 
   useEffect(() => {

client/src/pages/contract-create/contract-create.page.container.jsx

@@ -3,7 +3,7 @@ import { Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
@@ -30,13 +30,15 @@ export function ContractCreatePageContainer({
 }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
+
   const history = useNavigate();
-  const searchParams = useSearchParams();
+  const location = useLocation();
   const [loading, setLoading] = useState(false);
   const selectedCarState = useState(null);
   const selectedJobState = useState(
-      (searchParams.get('state') && searchParams.get('state').jobId) || null
+      (location.state && location.state.jobId) || null
   );
+
   const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
   const [intakeJob] = useMutation(UPDATE_JOB);
 

client/src/pages/contracts/contracts.page.container.jsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_ACTIVE_CONTRACTS_PAGINATED } from "../../graphql/cccontracts.queries";
@@ -20,7 +20,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { search, page, sortcolumn, sortorder } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -18,7 +18,7 @@ import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component
 import NotFound from "../../components/not-found/not-found.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import queryString from "query-string";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
@@ -31,7 +31,7 @@ export function CourtesyCarDetailPageContainer({
   addRecentItem,
   setSelectedHeader,
 }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams =queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = searchParams;
 
   const { t } = useTranslation();

client/src/pages/dms-payables/dms-payables.container.jsx

@@ -2,7 +2,7 @@ import { Button, Card, Col, notification, Row, Select, Space } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import DmsAllocationsSummaryApComponent from "../../components/dms-allocations-summary-ap/dms-allocations-summary-ap.component";
@@ -45,8 +45,8 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const history = useNavigate();
   const [logs, setLogs] = useState([]);
 
-   const searchParams = useSearchParams();
-   const state = Object.fromEntries(searchParams);
+  const { state } = useLocation();
+
    const logsRef = useRef(null);
 
   useEffect(() => {

client/src/pages/dms/dms.container.jsx

@@ -13,7 +13,7 @@ import queryString from "query-string";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import AlertComponent from "../../components/alert/alert.component";
@@ -62,7 +62,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const [logLevel, setLogLevel] = useState("DEBUG");
   const history = useNavigate();
   const [logs, setLogs] = useState([]);
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const { jobId } = search;
 
   const { loading, error, data } = useQuery(QUERY_JOB_EXPORT_DMS, {

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
@@ -19,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function ExportLogsPageComponent({ bodyshop }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search } = searchParams;
   const history = useNavigate();
 

client/src/pages/jobs-all/jobs-all.container.jsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import JobsListPaginated from "../../components/jobs-list-paginated/jobs-list-paginated.component";
@@ -25,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, statusFilters } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -24,7 +24,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaHardHat, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
-import {useNavigate, useSearchParams} from "react-router-dom";
+import {useNavigate, useLocation} from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
 import JobAuditTrail from "../../components/job-audit-trail/job-audit-trail.component";
@@ -79,7 +79,7 @@ export function JobsDetailPage({
   const [form] = Form.useForm();
   const history = useNavigate();
   const [loading, setLoading] = useState(false);
-  const search = queryString.parse(useSearchParams().toString());
+  const search = queryString.parse(useLocation().search);
   const formItemLayout = {
     layout: "vertical",
   };

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -2,6 +2,7 @@ import { useMutation, useQuery } from "@apollo/client";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import {useParams} from 'react-router-dom';
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
@@ -32,14 +33,12 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 function JobsDetailPageContainer({
-  bodyshop,
-  match,
   setBreadcrumbs,
   addRecentItem,
   setSelectedHeader,
   setJobReadOnly,
 }) {
-  const { jobId } = match.params;
+  const { jobId } = useParams();
   const { t } = useTranslation();
 
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {

client/src/pages/manage/manage.page.component.jsx

@@ -1,10 +1,10 @@
-import { BackTop, Layout } from "antd";
+import {BackTop, Layout} from "antd";
 import preval from "preval.macro";
-import React, { lazy, Suspense, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Link, Route, Routes } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import React, {lazy, Suspense, useEffect} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Link, Route, Routes, useLocation, useParams} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
 import ConflictComponent from "../../components/conflict/conflict.component";
@@ -17,400 +17,395 @@ import PartnerPingComponent from "../../components/partner-ping/partner-ping.com
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 import TestComponent from "../../components/_test/test.page";
-import { requestForToken } from "../../firebase/firebase.utils";
-import {
-  selectBodyshop,
-  selectInstanceConflict,
-} from "../../redux/user/user.selectors";
+import {requestForToken} from "../../firebase/firebase.utils";
+import {selectBodyshop, selectInstanceConflict,} from "../../redux/user/user.selectors";
 import * as Sentry from "@sentry/react";
 
 import "./manage.page.styles.scss";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 
 const ManageRootPage = lazy(() =>
-  import("../manage-root/manage-root.page.container")
+    import("../manage-root/manage-root.page.container")
 );
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
 const CardPaymentModalContainer = lazy(() =>
-  import("../../components/card-payment-modal/card-payment-modal.container.")
+    import("../../components/card-payment-modal/card-payment-modal.container.")
 );
 
 const JobsDetailPage = lazy(() =>
-  import("../jobs-detail/jobs-detail.page.container")
+    import("../jobs-detail/jobs-detail.page.container")
 );
 const InventoryListPage = lazy(() => import("../inventory/inventory.page"));
 const ProfilePage = lazy(() => import("../profile/profile.container.page"));
 const JobsAvailablePage = lazy(() =>
-  import("../jobs-available/jobs-available.page.container")
+    import("../jobs-available/jobs-available.page.container")
 );
 const ScheduleContainer = lazy(() =>
-  import("../schedule/schedule.page.container")
+    import("../schedule/schedule.page.container")
 );
 const VehiclesContainer = lazy(() =>
-  import("../vehicles/vehicles.page.container")
+    import("../vehicles/vehicles.page.container")
 );
 const VehiclesDetailContainer = lazy(() =>
-  import("../vehicles-detail/vehicles-detail.page.container")
+    import("../vehicles-detail/vehicles-detail.page.container")
 );
 const OwnersContainer = lazy(() => import("../owners/owners.page.container"));
 const OwnersDetailContainer = lazy(() =>
-  import("../owners-detail/owners-detail.page.container")
+    import("../owners-detail/owners-detail.page.container")
 );
 const ShopPage = lazy(() => import("../shop/shop.page.component"));
 const ShopVendorPageContainer = lazy(() =>
-  import("../shop-vendor/shop-vendor.page.container")
+    import("../shop-vendor/shop-vendor.page.container")
 );
 const EmailOverlayContainer = lazy(() =>
-  import("../../components/email-overlay/email-overlay.container.jsx")
+    import("../../components/email-overlay/email-overlay.container.jsx")
 );
 const JobsCreateContainerPage = lazy(() =>
-  import("../jobs-create/jobs-create.container")
+    import("../jobs-create/jobs-create.container")
 );
 const CourtesyCarCreateContainer = lazy(() =>
-  import("../courtesy-car-create/courtesy-car-create.page.container")
+    import("../courtesy-car-create/courtesy-car-create.page.container")
 );
 const CourtesyCarDetailContainer = lazy(() =>
-  import("../courtesy-car-detail/courtesy-car-detail.page.container")
+    import("../courtesy-car-detail/courtesy-car-detail.page.container")
 );
 const CourtesyCarsPage = lazy(() =>
-  import("../courtesy-cars/courtesy-cars.page.container")
+    import("../courtesy-cars/courtesy-cars.page.container")
 );
 const ContractCreatePage = lazy(() =>
-  import("../contract-create/contract-create.page.container")
+    import("../contract-create/contract-create.page.container")
 );
 const ContractDetailPage = lazy(() =>
-  import("../contract-detail/contract-detail.page.container")
+    import("../contract-detail/contract-detail.page.container")
 );
 const ContractsList = lazy(() =>
-  import("../contracts/contracts.page.container")
+    import("../contracts/contracts.page.container")
 );
 const BillsListPage = lazy(() => import("../bills/bills.page.container"));
 
 const JobCostingModal = lazy(() =>
-  import("../../components/job-costing-modal/job-costing-modal.container")
+    import("../../components/job-costing-modal/job-costing-modal.container")
 );
 const ReportCenterModal = lazy(() =>
-  import("../../components/report-center-modal/report-center-modal.container")
+    import("../../components/report-center-modal/report-center-modal.container")
 );
 const BillEnterModalContainer = lazy(() =>
-  import("../../components/bill-enter-modal/bill-enter-modal.container")
+    import("../../components/bill-enter-modal/bill-enter-modal.container")
 );
 const TimeTicketModalContainer = lazy(() =>
-  import("../../components/time-ticket-modal/time-ticket-modal.container")
+    import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
 const PaymentModalContainer = lazy(() =>
-  import("../../components/payment-modal/payment-modal.container")
+    import("../../components/payment-modal/payment-modal.container")
 );
 const ProductionListPage = lazy(() =>
-  import("../production-list/production-list.container")
+    import("../production-list/production-list.container")
 );
 const ProductionBoardPage = lazy(() =>
-  import("../production-board/production-board.container")
+    import("../production-board/production-board.container")
 );
 // const ShopTemplates = lazy(() =>
 //   import("../shop-templates/shop-templates.container")
 // );
 const JobIntake = lazy(() =>
-  import("../jobs-intake/jobs-intake.page.container")
+    import("../jobs-intake/jobs-intake.page.container")
 );
 const JobChecklistView = lazy(() =>
-  import("../jobs-checklist-view/jobs-checklist-view.page")
+    import("../jobs-checklist-view/jobs-checklist-view.page")
 );
 const JobDeliver = lazy(() =>
-  import("../jobs-deliver/jobs-delivery.page.container")
+    import("../jobs-deliver/jobs-delivery.page.container")
 );
 const AccountingQboCallback = lazy(() =>
-  import("../accounting-qbo/accounting-qbo.page")
+    import("../accounting-qbo/accounting-qbo.page")
 );
 const AccountingReceivables = lazy(() =>
-  import("../accounting-receivables/accounting-receivables.container")
+    import("../accounting-receivables/accounting-receivables.container")
 );
 const AccountingPayables = lazy(() =>
-  import("../accounting-payables/accounting-payables.container")
+    import("../accounting-payables/accounting-payables.container")
 );
 const AccountingPayments = lazy(() =>
-  import("../accounting-payments/accounting-payments.container")
+    import("../accounting-payments/accounting-payments.container")
 );
 const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
 const ReadyJobs = lazy(() => import("../jobs-ready/jobs-ready.page"));
 const JobsClose = lazy(() => import("../jobs-close/jobs-close.container"));
 const JobsAdmin = lazy(() => import("../jobs-admin/jobs-admin.page"));
 const TempDocs = lazy(() =>
-  import("../temporary-docs/temporary-docs.container")
+    import("../temporary-docs/temporary-docs.container")
 );
 
 const ShopCsiPageContainer = lazy(() =>
-  import("../shop-csi/shop-csi.container.page")
+    import("../shop-csi/shop-csi.container.page")
 );
 const PaymentsAll = lazy(() =>
-  import("../payments-all/payments-all.container.page")
+    import("../payments-all/payments-all.container.page")
 );
 const ShiftClock = lazy(() => import("../shift-clock/shift-clock.page"));
 const Scoreboard = lazy(() =>
-  import("../scoreboard/scoreboard.page.container")
+    import("../scoreboard/scoreboard.page.container")
 );
 const TimeTicketsAll = lazy(() =>
-  import("../time-tickets/time-tickets.container")
+    import("../time-tickets/time-tickets.container")
 );
 const Help = lazy(() => import("../help/help.page"));
 const PartsQueue = lazy(() =>
-  import("../parts-queue/parts-queue.page.container")
+    import("../parts-queue/parts-queue.page.container")
 );
 const ExportLogs = lazy(() =>
-  import("../export-logs/export-logs.page.container")
+    import("../export-logs/export-logs.page.container")
 );
 const Phonebook = lazy(() => import("../phonebook/phonebook.page.container"));
 
 const EmailTest = lazy(() =>
-  import("../../components/email-test/email-test-component")
+    import("../../components/email-test/email-test-component")
 );
 const Dashboard = lazy(() => import("../dashboard/dashboard.container"));
 const Dms = lazy(() => import("../dms/dms.container"));
 const DmsPayables = lazy(() =>
-  import("../dms-payables/dms-payables.container")
+    import("../dms-payables/dms-payables.container")
 );
 
-const { Content, Footer } = Layout;
+const {Content, Footer} = Layout;
 
 const mapStateToProps = createStructuredSelector({
-  conflict: selectInstanceConflict,
-  bodyshop: selectBodyshop,
+    conflict: selectInstanceConflict,
+    bodyshop: selectBodyshop,
 });
 
-export function Manage({ match, conflict, bodyshop }) {
+export function Manage({conflict, bodyshop}) {
 
-  // TODO: Remove after client upgrade
-  console.log('Manage Page :');
-  console.dir({ match, conflict, bodyshop });
+    const location = useLocation();
+    const params = useParams();
+    const currentPath = location.pathname
+    console.dir(currentPath)
+    const {t} = useTranslation();
 
-  const { t } = useTranslation();
+    useEffect(() => {
+        const widgetId = "IABVNO4scRKY11XBQkNr";
+        window.noticeable.render("widget", widgetId);
+        try {
+            requestForToken();
+        } catch (error) {
+            console.log("Unable to request for token.", error);
+        }
+    }, []);
 
-  useEffect(() => {
-    const widgetId = "IABVNO4scRKY11XBQkNr";
-    window.noticeable.render("widget", widgetId);
-    try {
-      requestForToken();
-    } catch (error) {
-      console.log("Unable to request for token.", error);
-    }
-  }, []);
+    useEffect(() => {
+        document.title = t("titles.app");
+    }, [t]);
+    const AppRouteTable = (
+        <Suspense
+            fallback={<LoadingSpinner message={t("general.labels.loadingapp")}/>}This
+        >
+            <PaymentModalContainer/>
 
-  useEffect(() => {
-    document.title = t("titles.app");
-  }, [t]);
+            <CardPaymentModalContainer/>
 
-  const AppRouteTable = (
-    <Suspense
-      fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
-    >
-      <PaymentModalContainer />
+            <BreadCrumbs/>
+            <BillEnterModalContainer/>
+            <JobCostingModal/>
+            <ReportCenterModal/>
+            <EmailOverlayContainer/>
+            <TimeTicketModalContainer/>
+            <PrintCenterModalContainer/>
+            <Routes>
+                <Route path='/_test' element={<TestComponent/>}/>
+                <Route path='/' element={<ManageRootPage/>}/>
+                <Route path='/jobs' element={<JobsPage/>}/>
+                <Route
+                    path='/jobs/:jobId/intake'
+                    element={<JobIntake/>}
+                />
+                <Route
+                    path='/jobs/:jobId/deliver'
+                    element={<JobDeliver/>}
+                />
+                <Route
+                    path='/jobs/:jobId/checklist'
+                    element={<JobChecklistView/>}
+                />
+                <Route
+                    path='/jobs/:jobId/close'
+                    element={<JobsClose/>}
+                />
+                <Route
+                    path='/jobs/:jobId/admin'
+                    element={<JobsAdmin/>}
+                />
+                <Route path='/jobs/all' element={<AllJobs/>}/>
+                <Route path='/jobs/ready' element={<ReadyJobs/>}/>
+                <Route
+                    path='/jobs/new'
+                    element={<JobsCreateContainerPage/>}
+                />
+                <Route path='/jobs/:jobId' element={<JobsDetailPage/>}/>
+                <Route path='/temporarydocs/' element={<TempDocs/>}/>
+                <Route
+                    path='/inventory/'
+                    element={<InventoryListPage/>}
+                />
+                <Route
+                    path='/courtesycars/'
+                    element={<CourtesyCarsPage/>}
+                />
+                <Route
+                    path='/courtesycars/new'
+                    element={<CourtesyCarCreateContainer/>}
+                />
+                <Route
+                    path='/courtesycars/contracts'
+                    element={<ContractsList/>}
+                />
+                <Route
+                    path='/courtesycars/contracts/new'
+                    element={<ContractCreatePage/>}
+                />
+                <Route
+                    path='/courtesycars/contracts/:contractId'
+                    element={<ContractDetailPage/>}
+                />
+                <Route
+                    path='/courtesycars/:ccId'
+                    element={<CourtesyCarDetailContainer/>}
+                />
+                <Route path='/profile' element={<ProfilePage/>}/>
+                <Route
+                    path='/vehicles'
+                    element={<VehiclesContainer/>}
+                />
+                <Route
+                    path='/production/list'
+                    element={<ProductionListPage/>}
+                />
+                <Route
+                    path='/production/board'
+                    element={<ProductionBoardPage/>}
+                />
+                <Route
+                    path='/vehicles/:vehId'
+                    element={<VehiclesDetailContainer/>}
+                />
+                <Route path='/bills' element={<BillsListPage/>}/>
+                <Route path='/owners' element={<OwnersContainer/>}/>
+                <Route
+                    path='/owners/:ownerId'
+                    element={<OwnersDetailContainer/>}
+                />
+                <Route
+                    path='/schedule'
+                    element={<ScheduleContainer/>}
+                />
+                <Route
+                    path='/available'
+                    element={<JobsAvailablePage/>}
+                />
+                <Route path='/shop' element={<ShopPage/>}/>
+                {
+                    //   <Route
+                    // path={`${currentPath}/shop/templates`}
+                    // element={<ShopTemplates />}
+                    //   />
+                }
+                <Route
+                    path='/shop/vendors'
+                    element={<ShopVendorPageContainer/>}
+                />
+                <Route
+                    path='/shop/csi'
+                    element={<ShopCsiPageContainer/>}
+                />
 
-      <CardPaymentModalContainer />
+                <Route
+                    path='/accounting/qbo'
+                    element={<AccountingQboCallback/>}
+                />
 
-      <BreadCrumbs />
-      <BillEnterModalContainer />
-      <JobCostingModal />
-      <ReportCenterModal />
-      <EmailOverlayContainer />
-      <TimeTicketModalContainer />
-      <PrintCenterModalContainer />
-      <Route path={`${match.path}/_test`} element={<TestComponent />} />
-      <Route path={`${match.path}`} element={<ManageRootPage />} />
-      <Route path={`${match.path}/jobs`} element={<JobsPage />} />
-      <Routes>
-        <Route
-          path={`${match.path}/jobs/:jobId/intake`}
-          element={<JobIntake />}
-        />
-        <Route
-          path={`${match.path}/jobs/:jobId/deliver`}
-          element={<JobDeliver />}
-        />
-        <Route
-          path={`${match.path}/jobs/:jobId/checklist`}
-          element={<JobChecklistView />}
-        />
-        <Route
-          path={`${match.path}/jobs/:jobId/close`}
-          element={<JobsClose />}
-        />
-        <Route
-          path={`${match.path}/jobs/:jobId/admin`}
-          element={<JobsAdmin />}
-        />
-        <Route path={`${match.path}/jobs/all`} element={<AllJobs />} />
-        <Route path={`${match.path}/jobs/ready`} element={<ReadyJobs />} />
-        <Route
-          path={`${match.path}/jobs/new`}
-          element={<JobsCreateContainerPage />}
-        />
-        <Route path={`${match.path}/jobs/:jobId`} element={<JobsDetailPage />} />
-      </Routes>
-      <Route path={`${match.path}/temporarydocs/`} element={<TempDocs />} />
-      <Route
-        path={`${match.path}/inventory/`}
-        element={<InventoryListPage />}
-      />
-      <Route
-        path={`${match.path}/courtesycars/`}
-        element={<CourtesyCarsPage />}
-      />
-      <Routes>
-        <Route
-          path={`${match.path}/courtesycars/new`}
-          element={<CourtesyCarCreateContainer />}
-        />
-        <Route
-          path={`${match.path}/courtesycars/contracts`}
-          element={<ContractsList />}
-        />
-        <Route
-          path={`${match.path}/courtesycars/contracts/new`}
-          element={<ContractCreatePage />}
-        />
-        <Route
-          path={`${match.path}/courtesycars/contracts/:contractId`}
-          element={<ContractDetailPage />}
-        />
-        <Route
-          path={`${match.path}/courtesycars/:ccId`}
-          element={<CourtesyCarDetailContainer />}
-        />
-      </Routes>
-      <Route path={`${match.path}/profile`} element={<ProfilePage />} />
-      <Route
-        path={`${match.path}/vehicles`}
-        element={<VehiclesContainer />}
-      />
-      <Route
-        path={`${match.path}/production/list`}
-        element={<ProductionListPage />}
-      />
-      <Route
-        path={`${match.path}/production/board`}
-        element={<ProductionBoardPage />}
-      />
-      <Route
-        path={`${match.path}/vehicles/:vehId`}
-        element={<VehiclesDetailContainer />}
-      />
-      <Route path={`${match.path}/bills`} element={<BillsListPage />} />
-      <Route path={`${match.path}/owners`} element={<OwnersContainer />} />
-      <Route
-        path={`${match.path}/owners/:ownerId`}
-        element={<OwnersDetailContainer />}
-      />
-      <Route
-        path={`${match.path}/schedule`}
-        element={<ScheduleContainer />}
-      />
-      <Route
-        path={`${match.path}/available`}
-        element={<JobsAvailablePage />}
-      />
-      <Route path={`${match.path}/shop/`} element={<ShopPage />} />
-      {
-        //   <Route
-        // path={`${match.path}/shop/templates`}
-        // element={<ShopTemplates />}
-        //   />
-      }
-      <Route
-        path={`${match.path}/shop/vendors`}
-        element={<ShopVendorPageContainer />}
-      />
-      <Route
-        path={`${match.path}/shop/csi`}
-        element={<ShopCsiPageContainer />}
-      />
+                <Route
+                    path='/accounting/receivables'
+                    element={<AccountingReceivables/>}
+                />
+                <Route
+                    path='/accounting/payables'
+                    element={<AccountingPayables/>}
+                />
+                <Route
+                    path='/accounting/payments'
+                    element={<AccountingPayments/>}
+                />
+                <Route
+                    path='/accounting/exportlogs'
+                    element={<ExportLogs/>}
+                />
+                <Route path='/partsqueue' element={<PartsQueue/>}/>
+                <Route path='/phonebook' element={<Phonebook/>}/>
 
-      <Route
-        path={`${match.path}/accounting/qbo`}
-        element={<AccountingQboCallback />}
-      />
+                <Route path='/payments' element={<PaymentsAll/>}/>
+                <Route path='/shiftclock' element={<ShiftClock/>}/>
+                <Route path='/scoreboard' element={<Scoreboard/>}/>
+                <Route
+                    path='/timetickets'
+                    element={<TimeTicketsAll/>}
+                />
+                <Route path='/help' element={<Help/>}/>
+                <Route path='/emailtest' element={<EmailTest/>}/>
+                <Route path='/dashboard' element={<Dashboard/>}/>
+                <Route path='/dms' element={<Dms/>}/>
+                <Route path='/dmsap' element={<DmsPayables/>}/>
+            </Routes>
+        </Suspense>
+    );
 
-      <Route
-        path={`${match.path}/accounting/receivables`}
-        element={<AccountingReceivables />}
-      />
-      <Route
-        path={`${match.path}/accounting/payables`}
-        element={<AccountingPayables />}
-      />
-      <Route
-        path={`${match.path}/accounting/payments`}
-        element={<AccountingPayments />}
-      />
-      <Route
-        path={`${match.path}/accounting/exportlogs`}
-        element={<ExportLogs />}
-      />
-      <Route path={`${match.path}/partsqueue`} element={<PartsQueue />} />
-      <Route path={`${match.path}/phonebook`} element={<Phonebook />} />
+    let PageContent;
 
-      <Route path={`${match.path}/payments`} element={<PaymentsAll />} />
-      <Route path={`${match.path}/shiftclock`} element={<ShiftClock />} />
-      <Route path={`${match.path}/scoreboard`} element={<Scoreboard />} />
-      <Route
-        path={`${match.path}/timetickets`}
-        element={<TimeTicketsAll />}
-      />
-      <Route path={`${match.path}/help`} element={<Help />} />
-      <Route path={`${match.path}/emailtest`} element={<EmailTest />} />
-      <Route path={`${match.path}/dashboard`} element={<Dashboard />} />
-      <Route path={`${match.path}/dms`} element={<Dms />} />
-      <Route path={`${match.path}/dmsap`} element={<DmsPayables />} />
-    </Suspense>
-  );
+    if (conflict) PageContent = <ConflictComponent/>;
+    else if (bodyshop && bodyshop.sub_status !== "active")
+        PageContent = <ShopSubStatusComponent/>;
+    else PageContent = AppRouteTable;
 
-  let PageContent;
+    return (
+        <>
+            <ChatAffixContainer/>
+            <Layout className="layout-container">
+                <UpdateAlert/>
+                <HeaderContainer/>
 
-  if (conflict) PageContent = <ConflictComponent />;
-  else if (bodyshop && bodyshop.sub_status !== "active")
-    PageContent = <ShopSubStatusComponent />;
-  else PageContent = AppRouteTable;
+                <Content className="content-container">
+                    <PartnerPingComponent/>
+                    <Sentry.ErrorBoundary fallback={<ErrorBoundary/>} showDialog>
+                        {PageContent}
+                    </Sentry.ErrorBoundary>
 
-  return (
-    <>
-      <ChatAffixContainer />
-      <Layout className="layout-container">
-        <UpdateAlert />
-        <HeaderContainer />
-
-        <Content className="content-container">
-          <PartnerPingComponent />
-          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
-            {PageContent}
-          </Sentry.ErrorBoundary>
-
-          <BackTop />
-          <Footer>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center",
-                alignItems: "center",
-                margin: "1rem 0rem",
-              }}
-            >
-              <div style={{ display: "flex" }}>
-                <div>
-                  {`ImEX Online ${
-                    process.env.REACT_APP_GIT_SHA
-                  } - ${preval`module.exports = new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles"});`}`}
-                </div>
-                <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
-              </div>
-              <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
-                Disclaimer & Notices
-              </Link>
-            </div>
-          </Footer>
-        </Content>
-      </Layout>
-    </>
-  );
+                    <BackTop/>
+                    <Footer>
+                        <div
+                            style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                margin: "1rem 0rem",
+                            }}
+                        >
+                            <div style={{display: "flex"}}>
+                                <div>
+                                    {`ImEX Online ${
+                                        process.env.REACT_APP_GIT_SHA
+                                    } - ${preval`module.exports = new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles"});`}`}
+                                </div>
+                                <div id="noticeable-widget" style={{marginLeft: "1rem"}}/>
+                            </div>
+                            <Link to="/disclaimer" target="_blank" style={{color: "#ccc"}}>
+                                Disclaimer & Notices
+                            </Link>
+                        </div>
+                    </Footer>
+                </Content>
+            </Layout>
+        </>
+    );
 }
+
 export default connect(mapStateToProps, null)(Manage);

client/src/pages/manage/manage.page.container.jsx

@@ -13,7 +13,7 @@ const mapDispatchToProps = (dispatch) => ({
   setBodyshop: (bs) => dispatch(setBodyshop(bs)),
 });
 
-function ManagePageContainer({ match, setBodyshop }) {
+function ManagePageContainer({ setBodyshop }) {
   const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
@@ -31,7 +31,7 @@ function ManagePageContainer({ match, setBodyshop }) {
     return <LoadingSpinner message={t("general.labels.loadingshop")} />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  return <ManagePage match={match} />;
+  return <ManagePage />;
 }
 
 export default connect(null, mapDispatchToProps)(ManagePageContainer);

client/src/pages/owners-detail/owners-detail.page.container.jsx

@@ -2,6 +2,7 @@ import { useQuery } from "@apollo/client";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import {useParams} from 'react-router-dom';
 import AlertComponent from "../../components/alert/alert.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
@@ -23,12 +24,11 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function OwnersDetailContainer({
-  match,
   setBreadcrumbs,
   addRecentItem,
   setSelectedHeader,
 }) {
-  const { ownerId } = match.params;
+  const { ownerId } = useParams();
   const { t } = useTranslation();
 
   const { loading, data, error, refetch } = useQuery(QUERY_OWNER_BY_ID, {

client/src/pages/parts-queue/parts-queue.page.component.jsx

@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import JobPartsQueueCount from "../../components/job-parts-queue-count/job-parts-queue-count.component";
@@ -25,7 +25,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function PartsQueuePageComponent({ bodyshop }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const {
     //page,
     sortcolumn,

client/src/pages/payments-all/payments-all.container.page.jsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import PaymentsListPaginated from "../../components/payments-list-paginated/payment-list-paginated.component";
@@ -26,7 +26,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, searchObj } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(

client/src/pages/phonebook/phonebook.page.component.jsx

@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_PHONEBOOK_PAGINATED } from "../../graphql/phonebook.queries";
@@ -25,7 +25,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function PhonebookPageComponent({ bodyshop, authLevel }) {
-  const searchParams = queryString.parse(useSearchParams().toString());
+  const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search, phonebookentry } = searchParams;
   const history = useNavigate();
 

client/src/pages/phonebook/phonebook.page.container.jsx

@@ -8,8 +8,9 @@ import {
 } from "../../redux/application/application.actions";
 import PhonebookPage from "./phonebook.page.component";
 import { Drawer, Grid } from "antd";
-import { useSearchParams, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import PhonebookFormContainer from "../../components/phonebook-form/phonebook-form.container";
+import queryString from "query-string";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -30,8 +31,7 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
     ]);
   }, [setBreadcrumbs, t, setSelectedHeader]);
 
-    const [searchParams] = useSearchParams();
-    const search = Object.fromEntries(searchParams);
+    const search = queryString.parse(useLocation().search);
     const { phonebookentry } = search;
 
     const navigate = useNavigate();
@@ -58,8 +58,8 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
         <Drawer
             width={drawerPercentage}
             onClose={() => {
-              searchParams.delete("phonebookentry");
-              navigate({ search: searchParams.toString() });
+                delete search.phonebookentry;
+                navigate({ search: queryString.stringify(search) });
             }}
             visible={phonebookentry}
         >

client/src/pages/reset-password/reset-password.component.jsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import UserRequestResetPw from "../../components/user-request-pw-reset/user-request-reset-pw.component";
 import UserValidatePwReset from "../../components/user-validate-pw-reset/user-validate-pw-reset.component";
+import queryString from "query-string";
 
 export default function ResetPassword() {
-  const [searchParams] = useSearchParams();
-  const { mode, oobCode } = Object.fromEntries(searchParams);
+  const searchParams = queryString.parse(useLocation().search);
+  const { mode, oobCode } = searchParams;
 
   if (mode === "resetPassword")
     return <UserValidatePwReset oobCode={oobCode} />;

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -14,8 +14,9 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import {createStructuredSelector} from "reselect";
+import queryString from "query-string";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -28,8 +29,8 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-  const [searchParams] = useSearchParams();
-  const { tab } = Object.fromEntries(searchParams);
+    const searchParams = queryString.parse(useLocation().search);
+    const { tab } = searchParams;
   const navigate = useNavigate();
   useEffect(() => {
     document.title = t("titles.scoreboard");

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -3,7 +3,7 @@ import { useQuery } from "@apollo/client";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
@@ -13,6 +13,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { pageLimit } from "../../utils/config";
+import queryString from "query-string";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -25,8 +26,8 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ShopCsiContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-  const [searchParams] = useSearchParams();
-  const { page, sortcolumn, sortorder } = Object.fromEntries(searchParams);
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(
       QUERY_CSI_RESPONSE_PAGINATED,

client/src/pages/shop/shop.page.component.jsx

@@ -1,6 +1,6 @@
 import { Tabs } from "antd";
 import React, { useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container";
 import ShopInfoContainer from "../../components/shop-info/shop-info.container";
@@ -15,6 +15,7 @@ import {
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ShopInfoUsersComponent from "../../components/shop-users/shop-users.component";
+import queryString from "query-string";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -26,9 +27,8 @@ const mapDispatchToProps = (dispatch) => ({
 export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const { tab } = Object.fromEntries(searchParams);
-
+  const searchParams = queryString.parse(useLocation().search);
+  const { tab } = searchParams;
   useEffect(() => {
     document.title = t("titles.shop");
     setSelectedHeader("shop");

client/src/pages/tech/tech.page.component.jsx

@@ -48,7 +48,7 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function TechPage({ technician, match }) {
+export function TechPage({ technician }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -56,11 +56,16 @@ export function TechPage({ technician, match }) {
     document.title = t("titles.app");
   }, [t]);
 
+  useEffect(() => {
+    if (!technician) {
+      navigate(`/tech/login`);
+    }
+  }, [technician, navigate]);
+
   return (
       <Layout className="tech-layout-container">
         <TechSider />
         <Layout>
-          {technician ? null : navigate(`${match.path}/login`)}
           <UpdateAlert />
           <TechHeader />
 
@@ -76,12 +81,12 @@ export function TechPage({ technician, match }) {
                   <EmailOverlayContainer />
                   <PrintCenterModalContainer />
                   <Routes>
-                    <Route path={`${match.path}/login`} element={<TechLogin />} />
-                    <Route path={`${match.path}/joblookup`} element={<TechLookup />} />
-                    <Route path={`${match.path}/list`} element={<ProductionListPage />} />
-                    <Route path={`${match.path}/jobclock`} element={<TechJobClock />} />
-                    <Route path={`${match.path}/shiftclock`} element={<TechShiftClock />} />
-                    <Route path={`${match.path}/board`} element={<ProductionBoardPage />} />
+                    <Route path='/login' element={<TechLogin />} />
+                    <Route path='/joblokup' element={<TechLookup />} />
+                    <Route path='/list' element={<ProductionListPage />} />
+                    <Route path='/jobclock' element={<TechJobClock />} />
+                    <Route path='/shiftclock' element={<TechShiftClock />} />
+                    <Route path='/board' element={<ProductionBoardPage />} />
                   </Routes>
                 </FeatureWrapper>
               </Suspense>

client/src/pages/tech/tech.page.container.jsx

@@ -19,7 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
   setBodyshop: (bs) => dispatch(setBodyshop(bs)),
 });
 
-export function TechPageContainer({ bodyshop, setBodyshop, match }) {
+export function TechPageContainer({ bodyshop, setBodyshop }) {
   const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
@@ -32,7 +32,7 @@ export function TechPageContainer({ bodyshop, setBodyshop, match }) {
   if (loading || !bodyshop)
     return <LoadingSpinner message={t("general.labels.loadingshop")} />;
   if (error) return <AlertComponent message={error.message} type="error" />;
-  return <TechPage match={match} />;
+  return <TechPage />;
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(TechPageContainer);

client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import VehicleDetailComponent from "./vehicles-detail.page.component";
 import { useQuery } from "@apollo/client";
+import {useParams} from 'react-router-dom';
 import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
@@ -21,12 +22,11 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function VehicleDetailContainer({
-  match,
   setBreadcrumbs,
   addRecentItem,
   setSelectedHeader,
 }) {
-  const { vehId } = match.params;
+  const { vehId } = useParams;
   const { t } = useTranslation();
 
   const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {