useMatch() not working with React Router v6

I just updated my project to use react-router-dom v6 from v5 and the components that previously used props.match are no longer working using useMatch.

In Firefox I get the error - Can't access property "path", pattern is undefined

In Chrome I get the error - Cannot read properties of undefined (reading 'path')

The components look something like this:

import React, { useEffect, useState } from 'react';
import { Route, Routes, useMatch, useParams } from "react-router-dom";
import { businessDetail } from "../../../../redux/actions/business";
import {
  BusinessSettingTeamButtons,
  BusinessSettingTeamBody
} from "./BusinessPageTeam";

function BusinessPage (props) {
  const params = useParams()
  const { url, pathname } = useMatch();

  const [slug, setSlug] = useState(params.businessSlug);

  // ADDED TO THE EDIT
  const businessSettingTeamButtons = <BusinessSettingTeamButtons
      url={url}
      setSettings={setSettings}/>

  useEffect(() => {
    const loadBusiness = () => {
      props.businessDetail(slug);
    }
    loadBusiness()
  }, [props.businessDetail])

  const bodies =
    <div>
      <Routes>
        <Route path={`${pathname}`}>
          {businessSettingProfileBody}
        </Route>
        <Route path={`${pathname}/team`}>
          {businessSettingTeamBody}
        </Route>
        <Route path={`${pathname}/settings`}>
          {businessSettingBody}
        </Route>
      </Routes>
    </div>

  return (
    <div>
      {bodies}
    </div>
  )
}

function mapStateToProps(state) {
  return {
    business: state.business,
  }
}

export default connect(mapStateToProps, { businessDetail })(BusinessPage);

Routes was previously named Switch and pathname was previously named path.

Child component:

export function BusinessSettingTeamButtons (props) {
  return (
    <nav>
      <Link
        className="btn btn-link"
        onClick={() => props.setSettings('profile')}
        to={`${props.url}`}
      >
        Profile
      </Link>
      <Link
        className="btn btn-primary"
        onClick={() => props.setSettings('team')}
        to={`${props.url}/team`}
      >
        Team
      </Link>
      <Link
        className="btn btn-link"
        onClick={() => props.setSettings('settings')}
        to={`${props.url}/settings`}
      >
        Settings
      </Link>
    </nav>
  );
}

The useMatch hook takes a required path pattern for route matching.

See useMatch

> declare function useMatch<
> ParamKey extends ParamParseKey<Path>,
> Path extends string
> >(
> pattern: PathPattern<Path> | Path // <-- required argument!
> ): PathMatch<ParamKey> | null;

But the good news with react-router-dom@6 is that you don't need to implement this part if all you are doing is rendering descendent routes. The Routes component builds descendent routes relative to the parent routes, so it's completely unnecessary to get the url and pathname of the parent route manually, you can just specify the relative paths.

The Route component also doesn't take children content, the only valid child of a Route component is another Route component in the case of nested routing. Place the routed content on the Route component's element prop, which takes a React.ReactNode, a.k.a. JSX value. Be sure that businessSettingProfileBody, businessSettingTeamBody, and businessSettingBody are JSX values (JSX literals are ok IIRC). If they are not then this part of the UI might need to be tweaked a little.

import React, { useEffect } from 'react';
import { Route, Routes, useParams } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { businessDetail } from "../../../../redux/actions/business";

function BusinessPage () {
  const dispatch = useDispatch();

  const { businessSlug } = useParams();

  const business = useSelector(state => state.business); // where is this used?

  useEffect(() => {
    // dispatch on component mount/initial render
    dispatch(businessDetail(businessSlug));
  }, []);

  return (
    <div>
      <Routes>
        <Route path="/" element={businessSettingProfileBody} />
        <Route path="/team" element={businessSettingTeamBody} />
        <Route path="/settings" element={businessSettingBody} />
      </Routes>
    </div>
  )
}

export default BusinessPage;