connected-react-router not working with react-router v6 I using redux first history error Cannot read properties of undefined (reading 'pathname')

Question

i am doing library update in my react project and i am using react-router, react-router-dom and connected-react-router but since this is not working with new react-router v6 iam now using redux first history and i got error saying TypeError: Cannot read properties of undefined (reading 'pathname')

I am doing a library update in my react project and I am using react-router, react-router-dom, and connected-react-router but since this is not working with the new react-router v6 I am now using redux first history and I got an error saying Type Error: Cannot read properties of undefined (reading 'pathname').

App.js

* app.js
* 
* This is the entry file for the application, only setup and boilerplate
* code.
  \*/

// Needed for redux-saga es6 generator support
import '@babel/polyfill';

// Import all the third party stuff
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
// import { ConnectedRouter } from 'connected-react18-router';
import { Router } from 'react-router-dom';
import { ApolloProvider } from 'react-apollo';
import history from 'utils/history';
import 'sanitize.css/sanitize.css';
// Import root app
import App from 'containers/App';
import 'react-toastify/dist/ReactToastify.css';
import './styles/layout/base.scss';
import './styles/common.css';
// eslint-disable-next-line import/order
import { client, store } from './config/store';
// Import Language Provider

// Load the favicon and the .htaccess file
// Load the favicon and the .htaccess file
/\* eslint-disable import/no-unresolved, import/extensions */
import '!file-loader?name=\[name\].\[ext\]!../public/favicons/favicon.ico'; // eslint-disable-line
// eslint-disable-next-line import/no-webpack-loader-syntax
import 'file-loader?name=.htaccess!./.htaccess';
// eslint-disable-next-line import/order
import { ToastContainer, Slide } from 'react-toastify';
import { createReduxHistoryContext } from 'redux-first-history';
/* eslint-enable import/no-unresolved, import/extensions \*/

const { createReduxHistory } = createReduxHistoryContext({ history });

const reduxHistory = createReduxHistory(store);
// console.log(reduxHistory);

const MOUNT_NODE = document.getElementById('app');

const root = createRoot(MOUNT_NODE);

const render = () =\> {
root.render(
\<ApolloProvider client={client}\>
\<Provider store={store}\>
\<Router history={reduxHistory}\>
\<App /\>
\<ToastContainer
position="top-right"
icon={false}
autoClose={5000}
hideProgressBar
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnVisibilityChange={false}
draggable={false}
pauseOnHover={false}
transition={Slide}
/\>
\</Router\>
\</Provider\>
\</ApolloProvider\>
);
};

if (module.hot) {
module.hot.accept('./App', () =\> {
/\* For Webpack 2.x
Need to disable babel ES2015 modules transformation in .babelrc
presets: \[
\["es2015", { "modules": false }\]
\]
\*/
render();

    /* For Webpack 1.x
    const NextApp = require('./App').default
    renderWithHotReload(NextApp)
    */

});
}

// Chunked polyfill for browsers without Intl support
if (!window.Intl) {
import('intl').then(() =\> render()).catch(err =\> {
throw err;
});
} else {
render();
}

// Install ServiceWorker and AppCache in the end since
// it's not most important operation and if main code fails,
// we do not want it installed

if (process.env.NODE_ENV === 'production') {
import('offline-plugin/runtime').then(offlinePluginRuntime =\> {
offlinePluginRuntime.install();
});
}

Reducer.js

import { reducer as form } from 'redux-form';
import { combineReducers } from 'redux';
// import { connectRouter } from 'connected-react18-router';
// import history from 'utils/history';

import { routerReducer } from 'react-router-redux';
import login from './login/reducers';
import department from './department/reducers';
import designation from './designation/reducers';
import paymentTerm from './payment-term/reducers';
import deliveryCondition from './delivery-condition/reducers';
import deliveryLocation from './delivery-location/reducers';
import group from './group/reducers';
import material from './material/reducers';
import materialSpecification from './material-specification/reducers';
import materialCategory from './material-category/reducers';
import materialType from './material-type/reducers';
import materialTest from './material-test/reducers';
import materialLength from './material-length/reducers';
import materialGroup from './material-group/reducers';
import materialSubGroup from './material-sub-group/reducers';
import materialMake from './material-make/reducers';
import priceBasis from './price-basis/reducers';
import supplierType from './supplier-type/reducers';
import regretReason from './regret-reason/reducers';
import sector from './sector/reducers';
import bank from './bank/reducers';
import employee from './employee/reducers';
import tpiAgency from './tpi-agency/reducers';
import dimension from './dimension/reducers';
import customer from './customer/reducers';
import supplier from './supplier/reducers';
import product from './product/reducers';
import project from './project/reducers';
import notification from './notification/reducers';
import emailTemplate from './email-template/reducers';
import itp from './ITP/reducers';
import warrantyCondition from './warranty-condition/reducers';
import schedule from './schedule/reducers';
import freightBasis from './freight-basis/reducers';
import quotation from './quotation/reducers';
import salesOrder from './sales-order/reducers';
import indent from './indent/reducers';
import purchaseOrder from './purchase-order/reducers';
import supplierEnquiry from './supplier-enquiry/reducers';
import uiReducer from './modules/ui';
import utils from './modules/utils';
import grn from './grn/reducers';
import stock from './stock/reducers';
import chapterHeading from './chapter-heading/reducers';
import deliveryOrder from './delivery-order/reducers';
import stockTransfer from './stock-transfer/reducers';
import pmdc from './pmdc/reducers';
import invoice from './invoice/reducers';
import dashboard from './dashboard/reducers';
import tdsCharge from './tds-charge/reducers';
import taxGroup from './taxGroup/reducers';
import taxAddonCharge from './tax-profile/reducers';
import materialReject from './material-reject-purchase-order/reducers';
import exchangeRate from './exchange-rate/reducers';
import location from './location/reducers';
import document from './document/reducers';
import color from './color/reducers';
import dashboardFilters from './dashboard-filters/reducers';
import supplierDeliveryCondition from './supplier-delivery-condition/reducers';
import supplierDeliveryLocation from './supplier-delivery-location/reducers';
import supplierPaymentTerm from './supplier-payment-term/reducers';

export default function createReducer(injectedReducers = {}) {
const rootReducer = combineReducers({
form,
login,
department,
designation,
supplierPaymentTerm,
paymentTerm,
deliveryCondition,
deliveryLocation,
group,
material,
materialSpecification,
materialCategory,
materialTest,
materialLength,
materialGroup,
materialType,
materialMake,
priceBasis,
supplierType,
regretReason,
sector,
bank,
employee,
tpiAgency,
dimension,
product,
project,
notification,
emailTemplate,
customer,
supplier,
quotation,
itp,
warrantyCondition,
schedule,
freightBasis,
salesOrder,
indent,
supplierEnquiry,
purchaseOrder,
ui: uiReducer,
utils,
grn,
chapterHeading,
deliveryOrder,
pmdc,
stock,
invoice,
stockTransfer,
dashboard,
tdsCharge,
taxAddonCharge,
taxGroup,
materialReject,
exchangeRate,
location,
materialSubGroup,
document,
color,
dashboardFilters,
supplierDeliveryCondition,
supplierDeliveryLocation,
router: routerReducer,
...injectedReducers
});

// Wrap the root reducer and return a new root reducer with router state
return rootReducer;
}
\`

ConfigureStore.js

/\* eslint-disable no-unused-vars */
/*\*

* Create the store with dynamic reducers
  \*/

import { createStore, applyMiddleware, compose } from 'redux';
import { createBrowserHistory } from 'history';
import { createReduxHistoryContext } from 'redux-first-history';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
import sagas from './sagas';

const baseHistory = createBrowserHistory();

// Create Redux history context with the base history
const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
history: baseHistory,
});

const composeEnhancers = (typeof window === 'object'
&& window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
&& process.env.NODE_ENV !== 'production'
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: compose)({});

const sagaMiddleware = createSagaMiddleware();

// Configure middlewares
const middlewares = \[sagaMiddleware, routerMiddleware\];

// Enhancers
const enhancers = \[applyMiddleware(...middlewares)\];

// Integrating routerReducer into the dynamic reducers setup
function configureReducer(injectedReducers = {}) {
return createReducer({
router: routerReducer, // Integrate routerReducer
...injectedReducers,
});
}

// Configure store with dynamic reducers and middlewares
export default function configureStore(initialState = {}) {
const store = createStore(
configureReducer(), // Use the function that integrates routerReducer
initialState,
composeEnhancers(...enhancers),
);

// Extensions
store.runSaga = sagaMiddleware.run(sagas);
store.injectedReducers = {}; // Reducer registry
store.injectedSagas = {}; // Saga registry

// Replace reducer on hot reload
if (module.hot) {
module.hot.accept('./reducers', () =\> {
store.replaceReducer(configureReducer(store.injectedReducers));
});
}

// Create redux-first-history history object
store.history = createReduxHistory(store);

return store;
}

Store.js

/\* eslint-disable */
import ApolloClient, { ApolloClient as UploadApolloClient, InMemoryCache } from 'apollo-boost';
import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
import { get, clearAll } from 'dan-utils/storageService';
import configureStore from '../redux/configureStore';
import history from '../utils/history';
import Messages from './messages';
import { prepareErrorMessage, showErrorToast } from '../utils/commonFunctions';
/* eslint-disable \*/
// Create redux store with history
const initialState = {};
export const store = configureStore(initialState, history);

const omitDeepArrayWalk = (arr, key) =\> {
return arr.map(val =\> {
if (Array.isArray(val)) return omitDeepArrayWalk(val, key);
else if (typeof val === "object") return omitDeep(val, key);
return val;
});
};
const omitDeep = (obj, key) =\> {
const keys = Object.keys(obj);
const newObj = {};
keys.forEach(i =\> {
if (i !== key) {
const val = obj\[i\];
if (val instanceof Date) newObj\[i\] = val;
else if (Array.isArray(val)) newObj\[i\] = omitDeepArrayWalk(val, key);
else if (typeof val === "object" && val !== null)
newObj\[i\] = omitDeep(val, key);
else newObj\[i\] = val;
}
});
return newObj;
};

export const client = new ApolloClient({
uri: process.env.API_URL,
fetchOptions: {
credentials: 'include'
},
cache: new InMemoryCache(),
request: async (operation) =\> {
const token = (await get('token')) || '';
const branch = await JSON.parse(get('branch'));
if (operation.variables && !operation.variables.file) {
// eslint-disable-next-line
operation.variables = omitDeep(operation.variables, "\__typename");
}
operation.setContext({
headers: {
'access-token': token,
...(branch && branch.id && operation.variables.branch_value ? { 'branch-id' : null } : branch && branch.id ? { 'branch-id' : branch.id } : {} )
},
variables: operation.variables
});
},
onError: ({ networkError, graphQLErrors }) =\> {
if (graphQLErrors && typeof graphQLErrors\[0\] === 'string') {
showErrorToast(JSON.parse(graphQLErrors\[0\]).message);
} else if (graphQLErrors && graphQLErrors.length \> 0) {
// for Auto Closing
// showErrorToast(prepareErrorMessage(graphQLErrors), { autoClose: 2000 \* graphQLErrors.length });
showErrorToast(prepareErrorMessage(graphQLErrors));
} else if (networkError) {
if (networkError.statusCode === 401) {
clearAll();
window.location.href = '/login';
} else {
showErrorToast(Messages.SomethingWrongError);
}
} else {
showErrorToast(Messages.SomethingWrongError);
}

}
});

export const clientFileUpload = new UploadApolloClient({
cache: new InMemoryCache(),
link: createUploadLink({
uri: process.env.API_URL,
headers: {
'access-token': get('token') || null,
...(get('branch') && JSON.parse(get('branch')).id ? { 'branch-id' : JSON.parse(get('branch')).id } : {})
},
}),
onError: ({ networkError, graphQLErrors }) =\> {
if (graphQLErrors && typeof graphQLErrors\[0\] === 'string') {
showErrorToast(JSON.parse(graphQLErrors\[0\]).message);
} else if (graphQLErrors && graphQLErrors.length \> 0) {
// For Auto Closing
// showErrorToast(prepareErrorMessage(graphQLErrors), { autoClose: 2000 \* graphQLErrors.length });
showErrorToast(prepareErrorMessage(graphQLErrors));
} else if (networkError) {
if (networkError.statusCode === 401) {
clearAll();
window.location.href = '/login';
} else {
showErrorToast(Messages.SomethingWrongError);
}
} else {
showErrorToast(Messages.SomethingWrongError);
}

}
});

history.js

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

import React from 'react';
import { PropTypes } from 'prop-types';
import { Switch } from 'react-router';
import { PermissionRoute } from 'dan-utils/routePermission';
import Dashboard from '../Templates/Dashboard';
import {
DashboardPage, BlankPage, Error, NotFound, SyncModulesPage, AuditPage, ReportPage
} from '../pageListAsync';
import Routes from '../../config/routes';
import { Gstr1 } from '../Pages/Report';
import {
Customer,
EmployeeAdd,
Employee,
EmployeeProfile,
Department,
DeliveryCondition,
Designation,
Group,
PaymentTerm,
SavedFilter,
DeliveryLocation,
Material,
PriceBasis,
SupplierType,
Sector,
Bank,
BankBranch,
MaterialTest,
MaterialType,
MaterialMake,
GroupAdd,
MaterialCategory,
TPIAgency,
MaterialSpecification,
Dimension,
Product,
TPIAgencyAdd,
RegretReason,
Supplier,
TaxGroup,
TaxProfile,
TaxProfileAdd,
SupplierAdd,
Project,
ITP,
MaterialLength,
MaterialGroup,
MaterialSubGroup,
WarrantyCondition,
Schedule,
FreightBasis,
CustomerAdd,
TdsCharge,
ChapterHeading,
NotificationTemplate,
EmailTemplate,
TaxAddonCharge,
ExchangeRate,
Location,
Document
} from '../Pages/Masters/MasterConfig';
import {
TechnicalQuotation, TechnicalQuotationAdd, CommercialQuotationAdd, QuotationView
} from '../Pages/Quotation/QuotationConfig';
import { SalesOrder, SalesOrderAdd, SalesOrderView } from '../Pages/SalesOrder/SalesOrderConfig';
import {
Indent, IndentOfferView, IndentView, MaterialIndentAdd
} from '../Pages/Indent/IndentConfig';
import {
SupplierEnquiry,
SupplierEnquiryView,
SupplierEnquiryViewOffer
} from '../Pages/SupplierEnquiry/SupplierEnquiryConfig';
import {
Grn, GrnAdd
} from '../Pages/Grn/GrnConfig';
import {
PurchaseOrder,
PurchaseOrderAdd,
PurchaseOrderView
} from '../Pages/PurchaseOrder/PurchaseOrderConfig';
import {
DeliveryOrder,
DeliveryOrderAdd,
DeliveryOrderView
} from '../Pages/DeliveryOrder/DeliveryOrderConfig';
import {
Pmdc,
PmdcAdd,
PmdcView
} from '../Pages/Pmdc/PmdcConfig';
import {
Stock, StockAdd
} from '../Pages/StockManagement/StockConfig';
import {
Invoice,
InvoiceAdd,
InvoiceView
} from '../Pages/Invoice/InvoiceConfig';

import {
StockTransfer, StockTransferCreate, StockTransferView
} from '../Pages/StockTransfer/StockTransferConfig';

import {
MaterialRejectPurchaseOrder,
MaterialRejectPurchaseOrderAdd,
MaterialRejectPurchaseOrderView
} from '../Pages/MaterialRejectPurchaseOrder/MaterialRejectPurchaseOrderConfig';
import PaymentTermSupplier from '../Pages/Masters/PaymentTermSupplier/PaymentTermSupplier';
import SupplierDeliveryLocation from '../Pages/Masters/DeliveryLocationSupplier/SupplierDeliveryLocation';
import SupplierDeliveryCondition from '../Pages/Masters/SupplierDeliveryCondition/SupplierDeliveryCondition';

const Application = (props) =\> {
const { changeMode, history } = props;
return (
\<Dashboard history={history} changeMode={changeMode}\>
\<Switch\>
\<PermissionRoute exact path={Routes.App} element={\<DashboardPage /\>} /\>
\<PermissionRoute exact path={Routes.Blank} element={BlankPage} /\>
\<PermissionRoute exact path={Routes.Gstr1} element={Gstr1} /\>
\<PermissionRoute exact path={Routes.Department} element={Department} /\>
\<PermissionRoute exact path={Routes.Designation} element={Designation} /\>
\<PermissionRoute exact path={Routes.PayementTerm} element={PaymentTerm} /\>
\<PermissionRoute exact path={Routes.PaymentTermSupplier} element={PaymentTermSupplier} /\>
\<PermissionRoute exact path={Routes.SupplierDeliveryLocation} element={SupplierDeliveryLocation} /\>
\<PermissionRoute exact path={Routes.SavedFilter} element={SavedFilter} /\>
\<PermissionRoute exact path={Routes.DeliveryCondition} element={DeliveryCondition} /\>
\<PermissionRoute exact path={Routes.DeliveryLocation} element={DeliveryLocation} /\>
\<PermissionRoute exact path={Routes.Material} element={Material} /\>
\<PermissionRoute exact path={Routes.MaterialSpecification} element={MaterialSpecification} /\>
\<PermissionRoute exact path={Routes.MaterialCategory} element={MaterialCategory} /\>
\<PermissionRoute exact path={Routes.MaterialType} element={MaterialType} /\>
\<PermissionRoute exact path={Routes.MaterialTest} element={MaterialTest} /\>
\<PermissionRoute exact path={Routes.MaterialLength} element={MaterialLength} /\>
\<PermissionRoute exact path={Routes.MaterialGroup} element={MaterialGroup} /\>
\<PermissionRoute exact path={Routes.MaterialSubGroup} element={MaterialSubGroup} /\>
\<PermissionRoute exact path={Routes.MaterialMake} element={MaterialMake} /\>
\<PermissionRoute exact path={Routes.PriceBasis} element={PriceBasis} /\>
\<PermissionRoute exact path={Routes.SupplierType} element={SupplierType} /\>
\<PermissionRoute exact path={Routes.Sector} element={Sector} /\>
\<PermissionRoute exact path={Routes.SupplierDeliveryCondition} element={SupplierDeliveryCondition} /\>
\<PermissionRoute exact path={Routes.Bank} element={Bank} /\>
\<PermissionRoute exact path={Routes.BankBranch} element={BankBranch} /\>
\<PermissionRoute exact path={Routes.Group} element={Group} /\>
\<PermissionRoute exact path={Routes.GroupAdd} element={GroupAdd} /\>
\<PermissionRoute exact path={Routes.Employee} element={Employee} /\>
\<PermissionRoute exact path={Routes.EmployeeAdd} element={EmployeeAdd} /\>
\<PermissionRoute exact path={Routes.EmployeeProfile} element={EmployeeProfile} /\>
\<PermissionRoute exact path={Routes.Customer} element={Customer} /\>
\<PermissionRoute exact path={Routes.CustomerAdd} element={CustomerAdd} /\>
\<PermissionRoute exact path={Routes.Supplier} element={Supplier} /\>
\<PermissionRoute exact path={Routes.SupplierAdd} element={SupplierAdd} /\>
\<PermissionRoute exact path={Routes.TPIAgency} element={TPIAgency} /\>
\<PermissionRoute exact path={Routes.TPIAgencyAdd} element={TPIAgencyAdd} /\>
\<PermissionRoute exact path={Routes.Dimension} element={Dimension} /\>
\<PermissionRoute exact path={Routes.Product} element={Product} /\>
\<PermissionRoute exact path={Routes.Project} element={Project} /\>
\<PermissionRoute exact path={Routes.NotificationTemplate} element={NotificationTemplate} /\>
\<PermissionRoute exact path={Routes.EmailTemplate} element={EmailTemplate} /\>
\<PermissionRoute exact path={Routes.ChapterHeading} element={ChapterHeading} /\>
\<PermissionRoute exact path={Routes.Document} element={Document} /\>
\<PermissionRoute exact path={Routes.ITP} element={ITP} /\>
\<PermissionRoute exact path={Routes.RegretReason} element={RegretReason} /\>
\<PermissionRoute exact path={Routes.WarrantyCondition} element={WarrantyCondition} /\>
\<PermissionRoute exact path={Routes.Schedule} element={Schedule} /\>
\<PermissionRoute exact path={Routes.FreightBasis} element={FreightBasis} /\>
\<PermissionRoute exact path={Routes.TdsCharge} element={TdsCharge} /\>
\<PermissionRoute exact path={Routes.TaxAddonCharge} element={TaxAddonCharge} /\>
\<PermissionRoute exact path={Routes.TaxGroup} element={TaxGroup} /\>
\<PermissionRoute exact path={Routes.TaxProfile} element={TaxProfile} /\>
\<PermissionRoute exact path={Routes.TaxProfileAdd} element={TaxProfileAdd} /\>
\<PermissionRoute exact path={Routes.ExchangeRate} element={ExchangeRate} /\>
\<PermissionRoute exact path={Routes.Location} element={Location} /\>

        <PermissionRoute exact path={Routes.TechnicalQuotation} element={TechnicalQuotation} />
        <PermissionRoute exact path={Routes.TechnicalQuotationAdd} element={TechnicalQuotationAdd} />
        <PermissionRoute exact path={Routes.CommercialQuotationAdd} element={CommercialQuotationAdd} />
        <PermissionRoute exact path={Routes.QuotationView} element={QuotationView} />
    
        <PermissionRoute exact path={Routes.SalesOrder} element={SalesOrder} />
        <PermissionRoute exact path={Routes.SalesOrderAdd} element={SalesOrderAdd} />
        <PermissionRoute exact path={Routes.SalesOrderView} element={SalesOrderView} />
    
        <PermissionRoute exact path={Routes.Indent} element={Indent} />
        <PermissionRoute exact path={Routes.IndentView} element={IndentView} />
        <PermissionRoute exact path={Routes.IndentOfferView} element={IndentOfferView} />
        <PermissionRoute exact path={Routes.MaterialIndentAdd} element={MaterialIndentAdd} />
    
        <PermissionRoute exact path={Routes.SupplierEnquiry} element={SupplierEnquiry} />
        <PermissionRoute exact path={Routes.SupplierEnquiryView} element={SupplierEnquiryView} />
        <PermissionRoute exact path={Routes.SupplierEnquiryViewOffer} element={SupplierEnquiryViewOffer} />
    
        <PermissionRoute exact path={Routes.Grn} element={Grn} />
        <PermissionRoute exact path={Routes.GrnAdd} element={GrnAdd} />
    
        <PermissionRoute exact path={Routes.PurchaseOrder} element={PurchaseOrder} />
        <PermissionRoute exact path={Routes.PurchaseOrderView} element={PurchaseOrderView} />
        <PermissionRoute exact path={Routes.PurchaseOrderAdd} element={PurchaseOrderAdd} />
    
        <PermissionRoute exact path={Routes.DeliveryOrder} element={DeliveryOrder} />
        <PermissionRoute exact path={Routes.DeliveryOrderView} element={DeliveryOrderView} />
        <PermissionRoute exact path={Routes.DeliveryOrderAdd} element={DeliveryOrderAdd} />
    
        <PermissionRoute exact path={Routes.Pmdc} element={Pmdc} />
        <PermissionRoute exact path={Routes.PmdcView} element={PmdcView} />
        <PermissionRoute exact path={Routes.PmdcAdd} element={PmdcAdd} />
        <PermissionRoute exact path={Routes.Stock} element={Stock} />
        <PermissionRoute exact path={Routes.StockAdd} element={StockAdd} />
    
        <PermissionRoute exact path={Routes.Invoice} element={Invoice} />
        <PermissionRoute exact path={Routes.InvoiceView} element={InvoiceView} />
        <PermissionRoute exact path={Routes.InvoiceAdd} element={InvoiceAdd} />
    
        <PermissionRoute exact path={Routes.StockTransfer} element={StockTransfer} />
        <PermissionRoute exact path={Routes.StockTransferView} element={StockTransferView} />
        <PermissionRoute exact path={Routes.StockTransferCreate} element={StockTransferCreate} />
    
        <PermissionRoute exact path={Routes.MaterialRejectPurchaseOrder} element={MaterialRejectPurchaseOrder} />
        <PermissionRoute exact path={Routes.MaterialRejectPurchaseOrderView} element={MaterialRejectPurchaseOrderView} />
        <PermissionRoute exact path={Routes.MaterialRejectPurchaseOrderAdd} element={MaterialRejectPurchaseOrderAdd} />
    
        <PermissionRoute exact path={Routes.PageNotFound} element={NotFound} />
        <PermissionRoute exact path={Routes.PageError} element={Error} />
        <PermissionRoute exact path={Routes.SyncModules} element={SyncModulesPage} />
        <PermissionRoute exact path={Routes.Audit} element={AuditPage} />
        <PermissionRoute exact path={Routes.Report} element={ReportPage} />
        <PermissionRoute element={NotFound} />
      </Switch>
    </Dashboard>

);
};

Application.propTypes = {
changeMode: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
};

export default Application;