Routing: Remove useRouteMatch hook (#94152)

* Update useSilenceNavData.ts

* Update MuteTimings

* Update AppRootPage.tsx

* Cleanup props

* Remove empty file

public/app/features/alerting/unified/hooks/useSilenceNavData.test.tsx

@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react';
-import { useRouteMatch } from 'react-router-dom';
+import { useMatch } from 'react-router-dom-v5-compat';
 
 import { useSilenceNavData } from './useSilenceNavData';
 
-jest.mock('react-router-dom', () => ({
+jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom'),
+  ...jest.requireActual('react-router-dom-v5-compat'),
-  useRouteMatch: jest.fn(),
+  useMatch: jest.fn(),
 }));
 
 const setup = () => {
@@ -21,7 +21,7 @@ const setup = () => {
 };
 describe('useSilenceNavData', () => {
   it('should return correct nav data when route is "/alerting/silence/new"', () => {
-    (useRouteMatch as jest.Mock).mockReturnValue({ isExact: true, path: '/alerting/silence/new' });
+    (useMatch as jest.Mock).mockImplementation((param) => param === '/alerting/silence/new');
     const { result } = setup();
 
     expect(result).toMatchObject({
@@ -30,7 +30,7 @@ describe('useSilenceNavData', () => {
   });
 
   it('should return correct nav data when route is "/alerting/silence/:id/edit"', () => {
-    (useRouteMatch as jest.Mock).mockReturnValue({ isExact: true, path: '/alerting/silence/:id/edit' });
+    (useMatch as jest.Mock).mockImplementation((param) => param === '/alerting/silence/:id/edit');
     const { result } = setup();
 
     expect(result).toMatchObject({

public/app/features/alerting/unified/hooks/useSilenceNavData.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useRouteMatch } from 'react-router-dom';
+import { useMatch } from 'react-router-dom-v5-compat';
 
 import { NavModelItem } from '@grafana/data';
 
@@ -8,18 +8,19 @@ const defaultPageNav: Partial<NavModelItem> = {
 };
 
 export function useSilenceNavData() {
-  const { isExact, path } = useRouteMatch();
   const [pageNav, setPageNav] = useState<NavModelItem | undefined>();
+  const isNewPath = useMatch('/alerting/silence/new');
+  const isEditPath = useMatch('/alerting/silence/:id/edit');
 
   useEffect(() => {
-    if (path === '/alerting/silence/new') {
+    if (isNewPath) {
       setPageNav({
         ...defaultPageNav,
         id: 'silence-new',
         text: 'Silence alert rule',
         subTitle: 'Configure silences to stop notifications from a particular alert rule',
       });
-    } else if (path === '/alerting/silence/:id/edit') {
+    } else if (isEditPath) {
       setPageNav({
         ...defaultPageNav,
         id: 'silence-edit',
@@ -27,7 +28,7 @@ export function useSilenceNavData() {
         subTitle: 'Recreate existing silence to stop notifications from a particular alert rule',
       });
     }
-  }, [path, isExact]);
+  }, [isEditPath, isNewPath]);
 
   return pageNav;
 }

public/app/features/playlist/PlaylistStartPage.tsx

@@ -1,13 +1,9 @@
 import { useParams } from 'react-router-dom-v5-compat';
 
-import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-
 import { playlistSrv } from './PlaylistSrv';
 
-interface Props extends GrafanaRouteComponentProps<{ uid: string }> {}
-
 // This is a react page that just redirects to new URLs
-export default function PlaylistStartPage({ match }: Props) {
+export default function PlaylistStartPage() {
   const { uid = '' } = useParams();
   playlistSrv.start(uid);
   return null;

public/app/features/plugins/components/AppRootPage.tsx

@@ -2,7 +2,7 @@
 import { AnyAction, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { useCallback, useEffect, useMemo, useReducer } from 'react';
 import * as React from 'react';
-import { useLocation, useRouteMatch } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useParams } from 'react-router-dom-v5-compat';
 
 import {
@@ -61,7 +61,6 @@ export function AppRootPage({ pluginId, pluginNavSection }: Props) {
   const addedLinksRegistry = useAddedLinksRegistry();
   const addedComponentsRegistry = useAddedComponentsRegistry();
   const exposedComponentsRegistry = useExposedComponentsRegistry();
-  const match = useRouteMatch();
   const location = useLocation();
   const [state, dispatch] = useReducer(stateSlice.reducer, initialState);
   const currentUrl = config.appSubUrl + location.pathname + location.search;
@@ -110,7 +109,7 @@ export function AppRootPage({ pluginId, pluginNavSection }: Props) {
       >
         <plugin.root
           meta={plugin.meta}
-          basename={match.url}
+          basename={location.pathname}
           onNavChanged={onNavChanged}
           query={queryParams}
           path={location.pathname}