Security: Upgrade react-router-dom to v6 (#6065)

* upgrade react-router-dom to 6.28.1

* switch <Switch> component to <Routes>

* replace useHistory with useNavigate

* remove useRouteMatch on OrganizationCard

* add RouterProvider to tests

* refactor Page and PrivatePage to handle new Routes

* don't set page title for certain pages

* fix RouterProvider in tests

* fix dmarc-summaries link to dmarc reports

frontend/package.json

@@ -57,7 +57,7 @@
     "react-error-boundary": "^3.1.4",
     "react-joyride": "^2.8.2",
     "react-phone-input-2": "^2.15.1",
-    "react-router-dom": "^5.3.3",
+    "react-router-dom": "^6.28.1",
     "react-table": "^7.8.0",
     "yup": "^0.32.11"
   },

frontend/src/admin/AdminPage.js

@@ -3,7 +3,7 @@ import { Button, Flex, Stack, Text, useToast, Select } from '@chakra-ui/react'
 import { AddIcon } from '@chakra-ui/icons'
 import { t, Trans } from '@lingui/macro'
 import { useQuery } from '@apollo/client'
-import { Link as RouteLink, useHistory, useParams } from 'react-router-dom'
+import { Link as RouteLink, useNavigate, useParams } from 'react-router-dom'
 import { useLingui } from '@lingui/react'
 
 import { AdminPanel } from './AdminPanel'
@@ -28,7 +28,7 @@ export default function AdminPage() {
 
   const { activeMenu } = useParams()
   const toast = useToast()
-  const history = useHistory()
+  const navigate = useNavigate()
   const { i18n } = useLingui()
 
   const memoizedSetDebouncedSearchTermCallback = useCallback(() => {
@@ -62,7 +62,7 @@ export default function AdminPage() {
 
   useEffect(() => {
     if (!activeMenu) {
-      history.replace(`/admin/organizations`)
+      navigate(`/admin/organizations`, { replace: true })
     }
     if (initRender && data?.findMyOrganizations?.edges.length === 1) {
       setInitRender(false)
@@ -145,7 +145,7 @@ export default function AdminPage() {
 
   const changeActiveMenu = (val) => {
     if (activeMenu !== val) {
-      history.replace(`/admin/${val}`)
+      navigate(`/admin/${val}`, { replace: true })
     }
   }
 

frontend/src/admin/__tests__/AdminPanel.test.js

@@ -4,7 +4,7 @@ import { theme, ChakraProvider } from '@chakra-ui/react'
 import { I18nProvider } from '@lingui/react'
 import { setupI18n } from '@lingui/core'
 import { MockedProvider } from '@apollo/client/testing'
-import { MemoryRouter, Route } from 'react-router-dom'
+import { createMemoryRouter, RouterProvider } from 'react-router-dom'
 import { makeVar } from '@apollo/client'
 import { en } from 'make-plural/plurals'
 
@@ -44,24 +44,37 @@ const mocks = [
   },
 ]
 
+const router = createMemoryRouter(
+  [
+    {
+      path: '/reset-password/:resetToken',
+      element: (
+        <AdminPanel orgSlug="test-org.slug" permission="ADMIN" orgId={rawOrgDomainListData.findOrganizationBySlug.id} />
+      ),
+    },
+  ],
+  {
+    initialEntries: ['/reset-password/fwsdGDFSGSDVA.gedafbedafded.bgdbsedbeagbe'],
+    initialIndex: 0,
+  },
+)
+
 describe('<AdminPanel />', () => {
   it('renders both a domain list and user list', async () => {
     const { getByText } = render(
       <MockedProvider mocks={mocks} cache={createCache()}>
         <UserVarProvider userVar={makeVar({ jwt: null, tfaSendMethod: null, userName: null })}>
           <I18nProvider i18n={i18n}>
             <ChakraProvider theme={theme}>
-              <MemoryRouter initialEntries={['/admin']} initialIndex={0}>
-                <Route path="/admin">
-                  <TourProvider>
-                    <AdminPanel
-                      orgSlug="test-org.slug"
-                      permission="ADMIN"
-                      orgId={rawOrgDomainListData.findOrganizationBySlug.id}
-                    />
-                  </TourProvider>
-                </Route>
-              </MemoryRouter>
+              <TourProvider>
+                <RouterProvider router={router}>
+                  <AdminPanel
+                    orgSlug="test-org.slug"
+                    permission="ADMIN"
+                    orgId={rawOrgDomainListData.findOrganizationBySlug.id}
+                  />
+                </RouterProvider>
+              </TourProvider>
             </ChakraProvider>
           </I18nProvider>
         </UserVarProvider>