diff --git a/packages/desktop-client/src/components/FinancesApp.js b/packages/desktop-client/src/components/FinancesApp.js
index 6ec499df247..74e592dd760 100644
--- a/packages/desktop-client/src/components/FinancesApp.js
+++ b/packages/desktop-client/src/components/FinancesApp.js
@@ -57,118 +57,82 @@ import PostsOfflineNotification from './schedules/PostsOfflineNotification';
 import Settings from './settings';
 import Titlebar, { TitlebarProvider } from './Titlebar';
 
-function PageRoute({
-  path,
-  component: Component,
-  redirectTo = '/budget',
-  worksInNarrow = true,
-}) {
+function NarrowNotSupported({ children, redirectTo = '/budget' }) {
   const { isNarrowWidth } = useResponsive();
-  return worksInNarrow || !isNarrowWidth ? (
-    <Route
-      path={path}
-      children={props => {
-        return (
-          <View
-            style={{
-              flex: 1,
-              display: props.match ? 'flex' : 'none',
-            }}
-          >
-            <Component {...props} />
-          </View>
-        );
-      }}
-    />
-  ) : (
-    <Redirect to={redirectTo} />
-  );
-}
-
-function NonPageRoute({
-  redirectTo = '/budget',
-  worksInNarrow = true,
-  ...routeProps
-}) {
-  const { isNarrowWidth } = useResponsive();
-
-  return worksInNarrow || !isNarrowWidth ? (
-    <Route {...routeProps} />
-  ) : (
-    <Redirect to={redirectTo} />
-  );
+  return isNarrowWidth ? <Redirect to={redirectTo} /> : children;
 }
 
 function Routes({ location }) {
   const { isNarrowWidth } = useResponsive();
   return (
     <Switch location={location}>
-      <Redirect from="/" exact to="/budget" />
-
-      <PageRoute path="/reports" component={Reports} worksInNarrow={false} />
-
-      <PageRoute
-        path="/budget"
-        component={isNarrowWidth ? MobileBudget : Budget}
-      />
-
-      <NonPageRoute
-        path="/schedules"
-        exact
-        component={Schedules}
-        worksInNarrow={false}
-      />
-      <NonPageRoute
-        path="/schedule/edit"
-        exact
-        component={EditSchedule}
-        worksInNarrow={false}
-      />
-      <NonPageRoute
-        path="/schedule/edit/:id"
-        component={EditSchedule}
-        worksInNarrow={false}
-      />
-      <NonPageRoute
-        path="/schedule/link"
-        component={LinkSchedule}
-        worksInNarrow={false}
-      />
-      <NonPageRoute
-        path="/schedule/discover"
-        component={DiscoverSchedules}
-        worksInNarrow={false}
-      />
-      <NonPageRoute
-        path="/schedule/posts-offline-notification"
-        component={PostsOfflineNotification}
-      />
-
-      <NonPageRoute path="/payees" exact component={ManagePayeesPage} />
-      <NonPageRoute path="/rules" exact component={ManageRulesPage} />
-      <NonPageRoute path="/settings" component={Settings} />
-      <NonPageRoute
-        path="/nordigen/link"
-        exact
-        component={NordigenLink}
-        worksInNarrow={false}
-      />
-
-      <NonPageRoute
-        path="/accounts/:id"
-        exact
-        children={props => {
+      <Route path="/" exact render={() => <Redirect to="/budget" />} />
+
+      <Route path="/reports">
+        <NarrowNotSupported>
+          <Reports />
+        </NarrowNotSupported>
+      </Route>
+
+      <Route path="/budget">
+        {isNarrowWidth ? <MobileBudget /> : <Budget />}
+      </Route>
+
+      <Route path="/schedules" exact>
+        <NarrowNotSupported>
+          <Schedules />
+        </NarrowNotSupported>
+      </Route>
+      <Route path="/schedule/edit" exact>
+        <NarrowNotSupported>
+          <EditSchedule />
+        </NarrowNotSupported>
+      </Route>
+      <Route path="/schedule/edit/:id">
+        <NarrowNotSupported>
+          <EditSchedule />
+        </NarrowNotSupported>
+      </Route>
+      <Route path="/schedule/link">
+        <NarrowNotSupported>
+          <LinkSchedule />
+        </NarrowNotSupported>
+      </Route>
+      <Route path="/schedule/discover">
+        <NarrowNotSupported>
+          <DiscoverSchedules />
+        </NarrowNotSupported>
+      </Route>
+      <Route path="/schedule/posts-offline-notification">
+        <PostsOfflineNotification />
+      </Route>
+
+      <Route path="/payees" exact>
+        <ManagePayeesPage />
+      </Route>
+      <Route path="/rules" exact>
+        <ManageRulesPage />
+      </Route>
+      <Route path="/settings">
+        <Settings />
+      </Route>
+      <Route path="/nordigen/link" exact>
+        <NarrowNotSupported>
+          <NordigenLink />
+        </NarrowNotSupported>
+      </Route>
+
+      <Route path="/accounts/:id" exact>
+        {props => {
           const AcctCmp = isNarrowWidth ? MobileAccount : Account;
           return (
             props.match && <AcctCmp key={props.match.params.id} {...props} />
           );
         }}
-      />
-      <NonPageRoute
-        path="/accounts"
-        exact
-        component={isNarrowWidth ? MobileAccounts : Account}
-      />
+      </Route>
+      <Route path="/accounts" exact>
+        {isNarrowWidth ? <MobileAccounts /> : <Account />}
+      </Route>
     </Switch>
   );
 }
@@ -327,13 +291,10 @@ function FinancesApp(props) {
           <View style={{ flexDirection: 'row', flex: 1 }}>
             <FloatableSidebar />
 
-            <div
+            <View
               style={{
                 flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
                 overflow: 'hidden',
-                position: 'relative',
                 width: '100%',
               }}
             >
@@ -362,11 +323,17 @@ function FinancesApp(props) {
               </div>
 
               <Switch>
-                <Route path="/budget" component={MobileNavTabs} />
-                <Route path="/accounts" component={MobileNavTabs} />
-                <Route path="/settings" component={MobileNavTabs} />
+                <Route path="/budget">
+                  <MobileNavTabs />
+                </Route>
+                <Route path="/accounts">
+                  <MobileNavTabs />
+                </Route>
+                <Route path="/settings">
+                  <MobileNavTabs />
+                </Route>
               </Switch>
-            </div>
+            </View>
           </View>
         </View>
       </CompatRouter>
diff --git a/packages/desktop-client/src/components/Modals.js b/packages/desktop-client/src/components/Modals.js
index 46df9f5b288..c18eeb85957 100644
--- a/packages/desktop-client/src/components/Modals.js
+++ b/packages/desktop-client/src/components/Modals.js
@@ -112,164 +112,110 @@ function Modals({
           />
         </Route>
 
-        <Route
-          path="/confirm-category-delete"
-          render={() => {
-            const { category, group, onDelete } = options;
-            return (
-              <ConfirmCategoryDelete
-                modalProps={modalProps}
-                actions={actions}
-                category={categories.find(c => c.id === category)}
-                group={categoryGroups.find(g => g.id === group)}
-                categoryGroups={categoryGroups}
-                onDelete={onDelete}
-              />
-            );
-          }}
-        />
+        <Route path="/confirm-category-delete">
+          <ConfirmCategoryDelete
+            modalProps={modalProps}
+            actions={actions}
+            category={categories.find(c => c.id === options.category)}
+            group={categoryGroups.find(g => g.id === options.group)}
+            categoryGroups={categoryGroups}
+            onDelete={options.onDelete}
+          />
+        </Route>
 
-        <Route
-          path="/load-backup"
-          render={() => (
-            <LoadBackup
-              watchUpdates
-              budgetId={budgetId}
-              modalProps={modalProps}
-              actions={actions}
-            />
-          )}
-        />
+        <Route path="/load-backup">
+          <LoadBackup
+            watchUpdates
+            budgetId={budgetId}
+            modalProps={modalProps}
+            actions={actions}
+          />
+        </Route>
 
-        <Route
-          path="/manage-rules"
-          render={() => {
-            return (
-              <ManageRulesModal
-                history={history}
-                modalProps={modalProps}
-                payeeId={options.payeeId}
-              />
-            );
-          }}
-        />
+        <Route path="/manage-rules">
+          <ManageRulesModal
+            history={history}
+            modalProps={modalProps}
+            payeeId={options.payeeId}
+          />
+        </Route>
 
-        <Route
-          path="/edit-rule"
-          render={() => {
-            return (
-              <EditRule
-                history={history}
-                modalProps={modalProps}
-                defaultRule={options.rule}
-                onSave={options.onSave}
-              />
-            );
-          }}
-        />
+        <Route path="/edit-rule">
+          <EditRule
+            history={history}
+            modalProps={modalProps}
+            defaultRule={options.rule}
+            onSave={options.onSave}
+          />
+        </Route>
 
-        <Route
-          path="/merge-unused-payees"
-          render={() => {
-            return (
-              <MergeUnusedPayees
-                history={history}
-                modalProps={modalProps}
-                payeeIds={options.payeeIds}
-                targetPayeeId={options.targetPayeeId}
-              />
-            );
-          }}
-        />
+        <Route path="/merge-unused-payees">
+          <MergeUnusedPayees
+            history={history}
+            modalProps={modalProps}
+            payeeIds={options.payeeIds}
+            targetPayeeId={options.targetPayeeId}
+          />
+        </Route>
 
-        <Route
-          path="/plaid-external-msg"
-          render={() => {
-            return (
-              <PlaidExternalMsg
-                modalProps={modalProps}
-                actions={actions}
-                onMoveExternal={options.onMoveExternal}
-                onClose={() => {
-                  options.onClose && options.onClose();
-                  send('poll-web-token-stop');
-                }}
-                onSuccess={options.onSuccess}
-              />
-            );
-          }}
-        />
-        <Route
-          path="/nordigen-init"
-          render={() => {
-            return (
-              <NordigenInitialise
-                modalProps={modalProps}
-                onSuccess={options.onSuccess}
-              />
-            );
-          }}
-        />
-        <Route
-          path="/nordigen-external-msg"
-          render={() => {
-            return (
-              <NordigenExternalMsg
-                modalProps={modalProps}
-                actions={actions}
-                onMoveExternal={options.onMoveExternal}
-                onClose={() => {
-                  options.onClose && options.onClose();
-                  send('nordigen-poll-web-token-stop');
-                }}
-                onSuccess={options.onSuccess}
-              />
-            );
-          }}
-        />
+        <Route path="/plaid-external-msg">
+          <PlaidExternalMsg
+            modalProps={modalProps}
+            actions={actions}
+            onMoveExternal={options.onMoveExternal}
+            onClose={() => {
+              options.onClose && options.onClose();
+              send('poll-web-token-stop');
+            }}
+            onSuccess={options.onSuccess}
+          />
+        </Route>
+        <Route path="/nordigen-init">
+          <NordigenInitialise
+            modalProps={modalProps}
+            onSuccess={options.onSuccess}
+          />
+        </Route>
+        <Route path="/nordigen-external-msg">
+          <NordigenExternalMsg
+            modalProps={modalProps}
+            actions={actions}
+            onMoveExternal={options.onMoveExternal}
+            onClose={() => {
+              options.onClose && options.onClose();
+              send('nordigen-poll-web-token-stop');
+            }}
+            onSuccess={options.onSuccess}
+          />
+        </Route>
 
-        <Route
-          path="/create-encryption-key"
-          render={() => {
-            return (
-              <CreateEncryptionKey
-                key={name}
-                modalProps={modalProps}
-                actions={actions}
-                options={options}
-              />
-            );
-          }}
-        />
+        <Route path="/create-encryption-key">
+          <CreateEncryptionKey
+            key={name}
+            modalProps={modalProps}
+            actions={actions}
+            options={options}
+          />
+        </Route>
 
-        <Route
-          path="/fix-encryption-key"
-          render={() => {
-            return (
-              <FixEncryptionKey
-                key={name}
-                modalProps={modalProps}
-                actions={actions}
-                options={options}
-              />
-            );
-          }}
-        />
+        <Route path="/fix-encryption-key">
+          <FixEncryptionKey
+            key={name}
+            modalProps={modalProps}
+            actions={actions}
+            options={options}
+          />
+        </Route>
 
-        <Route
-          path="/edit-field"
-          render={() => {
-            return (
-              <EditField
-                key={name}
-                modalProps={modalProps}
-                actions={actions}
-                name={options.name}
-                onSubmit={options.onSubmit}
-              />
-            );
-          }}
-        />
+        <Route path="/edit-field">
+          <EditField
+            key={name}
+            modalProps={modalProps}
+            actions={actions}
+            name={options.name}
+            onSubmit={options.onSubmit}
+          />
+        </Route>
 
         <Route path="/budget-summary">
           <BudgetSummary
diff --git a/packages/desktop-client/src/components/Titlebar.js b/packages/desktop-client/src/components/Titlebar.js
index 1b80258add2..407e4c64150 100644
--- a/packages/desktop-client/src/components/Titlebar.js
+++ b/packages/desktop-client/src/components/Titlebar.js
@@ -6,7 +6,7 @@ import React, {
   useContext,
 } from 'react';
 import { connect } from 'react-redux';
-import { Switch, Route, withRouter } from 'react-router-dom';
+import { Switch, Route, useLocation, useHistory } from 'react-router-dom';
 
 import { css, media } from 'glamor';
 
@@ -258,7 +258,6 @@ function BudgetTitlebar({ globalPrefs, saveGlobalPrefs, localPrefs }) {
 }
 
 function Titlebar({
-  location,
   globalPrefs,
   saveGlobalPrefs,
   localPrefs,
@@ -269,6 +268,8 @@ function Titlebar({
   style,
   sync,
 }) {
+  let history = useHistory();
+  let location = useLocation();
   let sidebar = useSidebar();
   let { isNarrowWidth } = useResponsive();
   const serverURL = useServerURL();
@@ -320,45 +321,30 @@ function Titlebar({
       )}
 
       <Switch>
-        <Route
-          path="/accounts"
-          exact
-          children={props => {
-            let state = props.location.state || {};
-            return state.goBack ? (
-              <Button onClick={() => props.history.goBack()} bare>
-                <ArrowLeft
-                  width={10}
-                  height={10}
-                  style={{ marginRight: 5, color: 'currentColor' }}
-                />{' '}
-                Back
-              </Button>
-            ) : null;
-          }}
-        />
+        <Route path="/accounts" exact>
+          {location.state?.goBack ? (
+            <Button onClick={() => history.goBack()} bare>
+              <ArrowLeft
+                width={10}
+                height={10}
+                style={{ marginRight: 5, color: 'currentColor' }}
+              />{' '}
+              Back
+            </Button>
+          ) : null}
+        </Route>
 
-        <Route
-          path="/accounts/:id"
-          exact
-          children={props => {
-            return (
-              props.match && <AccountSyncCheck id={props.match.params.id} />
-            );
-          }}
-        />
+        <Route path="/accounts/:id" exact>
+          <AccountSyncCheck />
+        </Route>
 
-        <Route
-          path="/budget"
-          exact
-          children={() => (
-            <BudgetTitlebar
-              globalPrefs={globalPrefs}
-              saveGlobalPrefs={saveGlobalPrefs}
-              localPrefs={localPrefs}
-            />
-          )}
-        />
+        <Route path="/budget" exact>
+          <BudgetTitlebar
+            globalPrefs={globalPrefs}
+            saveGlobalPrefs={saveGlobalPrefs}
+            localPrefs={localPrefs}
+          />
+        </Route>
       </Switch>
       <View style={{ flex: 1 }} />
       <UncategorizedButton />
@@ -374,14 +360,12 @@ function Titlebar({
   );
 }
 
-export default withRouter(
-  connect(
-    state => ({
-      globalPrefs: state.prefs.global,
-      localPrefs: state.prefs.local,
-      userData: state.user.data,
-      floatingSidebar: state.prefs.global.floatingSidebar,
-    }),
-    actions,
-  )(Titlebar),
-);
+export default connect(
+  state => ({
+    globalPrefs: state.prefs.global,
+    localPrefs: state.prefs.local,
+    userData: state.user.data,
+    floatingSidebar: state.prefs.global.floatingSidebar,
+  }),
+  actions,
+)(Titlebar);
diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 7d7ae712c1d..92179999653 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -2001,6 +2001,7 @@ class AccountInternal extends PureComponent {
 
 function AccountHack(props) {
   let { dispatch: splitsExpandedDispatch } = useSplitsExpanded();
+
   return (
     <AccountInternal
       {...props}
@@ -2009,8 +2010,12 @@ function AccountHack(props) {
   );
 }
 
-export default function Account(props) {
+export default function Account() {
   const syncEnabled = useFeatureFlag('syncAccount');
+  let params = useParams();
+  let location = useLocation();
+  let activeLocation = useActiveLocation();
+
   let state = useSelector(state => ({
     newTransactions: state.queries.newTransactions,
     matchedTransactions: state.queries.matchedTransactions,
@@ -2019,16 +2024,11 @@ export default function Account(props) {
     categoryGroups: state.queries.categories.grouped,
     dateFormat: state.prefs.local.dateFormat || 'MM/dd/yyyy',
     hideFraction: state.prefs.local.hideFraction || false,
-    expandSplits: props.match && state.prefs.local['expand-splits'],
-    showBalances:
-      props.match &&
-      state.prefs.local['show-balances-' + props.match.params.id],
-    showCleared:
-      props.match &&
-      !state.prefs.local['hide-cleared-' + props.match.params.id],
+    expandSplits: state.prefs.local['expand-splits'],
+    showBalances: params.id && state.prefs.local['show-balances-' + params.id],
+    showCleared: params.id && !state.prefs.local['hide-cleared-' + params.id],
     showExtraBalances:
-      props.match &&
-      state.prefs.local['show-extra-balances-' + props.match.params.id],
+      params.id && state.prefs.local['show-extra-balances-' + params.id],
     payees: state.queries.payees,
     modalShowing: state.modals.modalStack.length > 0,
     accountsSyncing: state.account.accountsSyncing,
@@ -2042,10 +2042,6 @@ export default function Account(props) {
     [dispatch],
   );
 
-  let params = useParams();
-  let location = useLocation();
-  let activeLocation = useActiveLocation();
-
   let transform = useMemo(() => {
     let filterByAccount = queries.getAccountFilter(params.id, '_account');
     let filterByPayee = queries.getAccountFilter(
@@ -2085,7 +2081,7 @@ export default function Account(props) {
             !!(activeLocation.state && activeLocation.state.locationPtr)
           }
           accountId={params.id}
-          location={props.location}
+          location={location}
         />
       </SplitsExpandedProvider>
     </SchedulesProvider>
diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/packages/desktop-client/src/components/accounts/MobileAccount.js
index cefcc54d5a9..2db1f2ca346 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccount.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccount.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom-v5-compat';
 
 import debounce from 'debounce';
@@ -88,12 +89,9 @@ function Account(props) {
     [dispatch],
   );
 
-  const { id: accountId } = props.match.params;
+  const { id: accountId } = useParams();
 
-  const makeRootQuery = () => {
-    const { id } = props.match.params || {};
-    return queries.makeTransactionsQuery(id);
-  };
+  const makeRootQuery = () => queries.makeTransactionsQuery(accountId);
 
   const updateQuery = query => {
     if (paged) {
diff --git a/packages/desktop-client/src/components/manager/ManagementApp.js b/packages/desktop-client/src/components/manager/ManagementApp.js
index d5724e0da42..7c90c251424 100644
--- a/packages/desktop-client/src/components/manager/ManagementApp.js
+++ b/packages/desktop-client/src/components/manager/ManagementApp.js
@@ -151,16 +151,20 @@ function ManagementApp({
             {userData && files ? (
               <>
                 <Switch>
-                  <Route exact path="/config-server" component={ConfigServer} />
-                  <Route
-                    exact
-                    path="/change-password"
-                    component={ChangePassword}
-                  />
+                  <Route exact path="/config-server">
+                    <ConfigServer />
+                  </Route>
+                  <Route exact path="/change-password">
+                    <ChangePassword />
+                  </Route>
                   {files && files.length > 0 ? (
-                    <Route exact path="/" component={BudgetList} />
+                    <Route exact path="/">
+                      <BudgetList />
+                    </Route>
                   ) : (
-                    <Route exact path="/" component={WelcomeScreen} />
+                    <Route exact path="/">
+                      <WelcomeScreen />
+                    </Route>
                   )}
                   {/* Redirect all other pages to this route */}
                   <Route path="/" render={() => <Redirect to="/" />} />
@@ -176,23 +180,27 @@ function ManagementApp({
                   }}
                 >
                   <Switch>
-                    <Route exact path="/config-server" component={null} />
-                    <Route
-                      exact
-                      path="/"
-                      render={() => (
-                        <LoggedInUser style={{ padding: '4px 7px' }} />
-                      )}
-                    />
+                    <Route exact path="/config-server" children={null} />
+                    <Route exact path="/">
+                      <LoggedInUser style={{ padding: '4px 7px' }} />
+                    </Route>
                   </Switch>
                 </View>
               </>
             ) : (
               <Switch>
-                <Route exact path="/login" component={Login} />
-                <Route exact path="/error" component={Error} />
-                <Route exact path="/config-server" component={ConfigServer} />
-                <Route exact path="/bootstrap" component={Bootstrap} />
+                <Route exact path="/login">
+                  <Login />
+                </Route>
+                <Route exact path="/error">
+                  <Error />
+                </Route>
+                <Route exact path="/config-server">
+                  <ConfigServer />
+                </Route>
+                <Route exact path="/bootstrap">
+                  <Bootstrap />
+                </Route>
                 {/* Redirect all other pages to this route */}
                 <Route path="/" render={() => <Redirect to="/bootstrap" />} />
               </Switch>
@@ -201,8 +209,10 @@ function ManagementApp({
         )}
 
         <Switch>
-          <Route exact path="/config-server" component={null} />
-          <Route path="/" component={ServerURL} />
+          <Route exact path="/config-server" children={null} />
+          <Route path="/">
+            <ServerURL />
+          </Route>
         </Switch>
         <Version />
       </View>
diff --git a/packages/desktop-client/src/components/modals/ManageRulesModal.js b/packages/desktop-client/src/components/modals/ManageRulesModal.js
index 7595854547d..1eb05415a80 100644
--- a/packages/desktop-client/src/components/modals/ManageRulesModal.js
+++ b/packages/desktop-client/src/components/modals/ManageRulesModal.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useLocation } from 'react-router-dom-v5-compat';
+import { useLocation } from 'react-router-dom';
 
 import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
 
diff --git a/packages/desktop-client/src/components/reports/index.js b/packages/desktop-client/src/components/reports/index.js
index 08ef98347d3..75af78499bc 100644
--- a/packages/desktop-client/src/components/reports/index.js
+++ b/packages/desktop-client/src/components/reports/index.js
@@ -10,9 +10,15 @@ import Overview from './Overview';
 export default function Reports() {
   return (
     <View style={{ flex: 1 }} data-testid="reports-page">
-      <Route path="/reports" exact component={Overview} />
-      <Route path="/reports/net-worth" exact component={NetWorth} />
-      <Route path="/reports/cash-flow" exact component={CashFlow} />
+      <Route path="/reports" exact>
+        <Overview />
+      </Route>
+      <Route path="/reports/net-worth" exact>
+        <NetWorth />
+      </Route>
+      <Route path="/reports/cash-flow" exact>
+        <CashFlow />
+      </Route>
     </View>
   );
 }
diff --git a/upcoming-release-notes/1045.md b/upcoming-release-notes/1045.md
new file mode 100644
index 00000000000..f31fafc1bfd
--- /dev/null
+++ b/upcoming-release-notes/1045.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [trevdor]
+---
+
+Update to React Router v5.1 conventions to facilitate the v6 upgrade.