How to use the react-router-dom.useRouteMatch function in react-router-dom

export const AppNavExpandable: React.FunctionComponent = ({
  title,
  to,
  items
}) => {
  const match = useRouteMatch({
    path: to
  })
  const isActive = !!match
  return (
    
      {items.map((item, j) => (
        // FIXME: each app-nav-item should have a fixed ID, using title? or j is just a dirty trick
        
      ))}
    
  )
}

function NotificationConfiguration() {
  const match = useRouteMatch();
  const history = useHistory();
  const category = NotificationsConfig.categories.find((c) => c.key === match.params.category);
  const event = category.events.find((e) => e.key === match.params.event);

  const { data, loading, error } = useQuery(NotificationAdminQuery);
  const [updateMutate] = useMutation(UpdateNotificationTemplate);
  const [
    updateNotificationTemplate, updateError, updateInProgress,
  ] = useAsyncFunction(updateMutate);

  const eventKey = `${category.key}/${event.key}`;

  const initialNotificationTemplate = (
    loading || error
      ? null
      : data.convention.notification_templates

function LoginScreen() {
  const { t } = useTranslation();
  const history = useHistory();
  const { path } = useRouteMatch();
  const { login, loginInProgress } = useAuth();
  const { disabledBroker } = getCurrentConfig();

  const [email, setEmail] = useState({ value: '', isValid: false });
  const [password, setPassword] = useState({
    value: '',
    isValid: false,
  });

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();

    if (email.isValid && password.isValid) {
      login({ username: email.value, password: password.value }).then(() => {
        history.replace('/home');
      });

const Printful = () => {
  const { config } = useConfig()
  const [create, setCreate] = useState(false)
  const [confirm, setConfirm] = useState(false)
  const match = useRouteMatch('/admin/orders/:orderId/:tab?')
  const { orderId } = match.params
  const { order, loading } = useOrder(orderId)
  const { printfulIds } = usePrintfulIds()
  const printfulOrder = usePrintful(orderId)
  const [{ admin }] = useStateValue()

  if (loading) {
    return <div>Loading...</div>
  }
  if (!order) {
    return <div>Order not found</div>
  }

  const printfulData = generatePrintfulOrder(order, printfulIds)

  if (printfulOrder) {

const AdminOrder = () => {
  const match = useRouteMatch('/admin/orders/:orderId/:tab?')
  const { orderId } = match.params
  const { order, loading } = useOrder(orderId)
  const urlPrefix = `/admin/orders/${orderId}`

  if (loading) {
    return 'Loading...'
  }
  if (!order) {
    return 'Order not found'
  }
  const cart = order.data
  return (
    <>
      {!cart.offerId ? null : <h3>{`Order #${cart.offerId}`}</h3>}
      <ul>
        <li></li></ul>

function InternalRoutes() {
  const { path } = useRouteMatch();
  const { isAdminOfWorkspace } = useWorkspace();

  return (

export const Playlist: React.FC = () => {
  const classes = useStyles();

  const match = useRouteMatch();
  if (!match) {
    throw new Error(`Match not found. Do you $stationSlug is not existed in query param.`);
  }

  const { loading, error, data, updateQuery } = useStationPlaylistQuery({
    variables: { stationSlug: match.params.slug },
    fetchPolicy: 'network-only',
  });

  useOnStationPlaylistChangedSubscription({
    variables: { stationSlug: match.params.slug },
    onSubscriptionData: ({ subscriptionData: { data } }) => {
      if (!data) return;
      const { onPlaylistSongChanged } = data;
      if (!onPlaylistSongChanged) return;
      const { entity } = onPlaylistSongChanged;

export const SwitchWith404: React.FunctionComponent = ({
  children
}) => {
  const match = useRouteMatch()
  const defaultMatch = React.useMemo(
    () => match && ,
    [match]
  )
  return (

const DomainConfigPageRaw: React.FC = () => {
  const dispatch = useDispatch();
  const { domains, isLoading, isFirstLoaded, certificates, acmeServer } = useSelector((state: RootState) => {
    return {
      isLoading: state.domains.isLoading,
      isFirstLoaded: state.domains.isFirstLoaded,
      domains: state.domains.domains,
      certificates: state.certificates.certificates,
      acmeServer: state.certificates.acmeServer,
    };
  });

  const router = useRouteMatch<{ name: string }>();
  const domain = domains.find((x) => x.name === router.params.name);

  if (isLoading && !isFirstLoaded) {
    return ;
  }

  if (!domain) {
    return no such domain;
  }

  const isWildcard = domain.domain.startsWith("*");

  let cert: Certificate | undefined;

  cert = certificates.find((x) => x.domains.length === 1 && x.domains[0] === domain.domain);
  if (!cert) {

function Demos() {
  let match = useRouteMatch('/demo/:name')
  let { bright } = visibleComponents[match ? match.params.name : defaultComponent]
  return (
    
      {Object.entries(visibleComponents).map(([name, item]) => (