React Router 6 fixes (#1178)

* Provide `match` prop to class components that still rely on it.
* Fixes #1169
* Fixes an unrelated crash on Payees

packages/desktop-client/src/components/accounts/Account.js

@@ -12,6 +12,7 @@ import {
   useParams,
   useNavigate,
   useLocation,
+  useMatch,
 } from 'react-router-dom';
 
 import { debounce } from 'debounce';
@@ -1996,10 +1997,12 @@ class AccountInternal extends PureComponent {
 
 function AccountHack(props) {
   let { dispatch: splitsExpandedDispatch } = useSplitsExpanded();
+  let match = useMatch(props.location.pathname);
 
   return (
     <AccountInternal
       {...props}
+      match={match}
       splitsExpandedDispatch={splitsExpandedDispatch}
     />
   );

packages/desktop-client/src/components/accounts/MobileAccount.js

@@ -164,7 +164,7 @@ function Account(props) {
 
   useEffect(updateSearchQuery, [searchText, currentQuery, state.dateFormat]);
 
-  if (!props.accounts || !props.accounts.length || !props.match) {
+  if (!props.accounts || !props.accounts.length) {
     return null;
   }
 

packages/desktop-client/src/components/budget/index.js

 import React, { memo, PureComponent, useContext, useMemo } from 'react';
 import { connect } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useMatch, useNavigate } from 'react-router-dom';
 
 import * as actions from 'loot-core/src/client/actions';
 import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
@@ -520,6 +520,8 @@ const RolloverBudgetSummary = memo(props => {
 function BudgetWrapper(props) {
   let spreadsheet = useSpreadsheet();
   let titlebar = useContext(TitlebarContext);
+  let location = useLocation();
+  let match = useMatch(location.pathname);
   let navigate = useNavigate();
 
   let reportComponents = useMemo(
@@ -566,6 +568,7 @@ function BudgetWrapper(props) {
         spreadsheet={spreadsheet}
         titlebar={titlebar}
         navigate={navigate}
+        match={match}
       />
     </View>
   );

packages/desktop-client/src/components/payees/index.js

@@ -515,7 +515,7 @@ export const ManagePayees = forwardRef(
               style={{
                 marginRight: '10px',
               }}
-              disabled={!(orphanedPayees.length > 0) && !orphanedOnly}
+              disabled={!(orphanedPayees?.length > 0) && !orphanedOnly}
               onClick={() => {
                 setOrphanedOnly(!orphanedOnly);
                 const filterInput = document.getElementById('filter-input');

upcoming-release-notes/1178.md

+---
+category: Bugfix
+authors: [trevdor]
+---
+
+A couple patches for the React Router 6 upgrade.