diff --git a/package-lock.json b/package-lock.json
index ce13f238c..ca5fc8a90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,8 @@
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@edx/frontend-component-footer": "12.2.1",
-        "@edx/frontend-component-header": "4.5.2",
-        "@edx/frontend-platform": "4.6.1",
+        "@edx/frontend-component-header": "4.6.0",
+        "@edx/frontend-platform": "5.0.0",
         "@edx/paragon": "^20.44.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
         "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -32,8 +32,8 @@
         "react-dom": "17.0.2",
         "react-helmet": "6.1.0",
         "react-redux": "7.2.9",
-        "react-router": "5.3.4",
-        "react-router-dom": "5.3.4",
+        "react-router": "6.14.2",
+        "react-router-dom": "6.14.2",
         "redux": "4.2.1",
         "redux-devtools-extension": "2.13.9",
         "redux-logger": "3.0.6",
@@ -2584,9 +2584,9 @@
       }
     },
     "node_modules/@edx/frontend-component-header": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.5.2.tgz",
-      "integrity": "sha512-FWnuIXT97DB/8beseMVe5uxzHitQnhraBi9QqgqsAMhb3Tl3ozBoa0HqPKZM4aVHn+j+MmDXtwVXa/hYWWZw2Q==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.6.0.tgz",
+      "integrity": "sha512-zZuMgHQWfFMTquVb4iL/iQMwKRRgts8CFFLyL8R6vQL1WfHd21hndhKii2kp9lBnIJgrilIfF79RsbImb5L0og==",
       "dependencies": {
         "@edx/paragon": "20.46.2",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
@@ -2597,11 +2597,10 @@
         "axios-mock-adapter": "1.21.5",
         "babel-polyfill": "6.26.0",
         "react-responsive": "8.2.0",
-        "react-router-dom": "5.3.4",
         "react-transition-group": "4.4.5"
       },
       "peerDependencies": {
-        "@edx/frontend-platform": "^4.0.0",
+        "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
         "prop-types": "^15.5.10",
         "react": "^16.9.0 || ^17.0.0",
         "react-dom": "^16.9.0 || ^17.0.0"
@@ -2665,9 +2664,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.6.1.tgz",
-      "integrity": "sha512-Fi/k7iZlFYs8qCsAAVz6Dseyzb9bJGh3r6iKUCiAq4emUl9UA/LfFHe4fDZcA5trVIkohhdLqrDu1U3UksY/5w==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.0.0.tgz",
+      "integrity": "sha512-DD9/B4rnC3BKPiWlbEFF1JIYFbWC6vUBKTyN8sf4khi4DNhhWhsobk+iNeCWNzF9UgCPRbniIqesdV1F9NXNZw==",
       "dependencies": {
         "@cospired/i18n-iso-languages": "4.1.0",
         "@formatjs/intl-pluralrules": "4.3.3",
@@ -2700,7 +2699,7 @@
         "react": "^16.9.0 || ^17.0.0",
         "react-dom": "^16.9.0 || ^17.0.0",
         "react-redux": "^7.1.1",
-        "react-router-dom": "^5.0.1",
+        "react-router-dom": "^6.0.0",
         "redux": "^4.0.4"
       }
     },
@@ -4388,23 +4387,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/@jest/types": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
-      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^16.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -4816,6 +4798,14 @@
       "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.2.1.tgz",
       "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA=="
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
+      "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -5541,16 +5531,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/yargs": {
-      "version": "16.0.5",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz",
-      "integrity": "sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
     "node_modules/@types/yargs-parser": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
@@ -7250,22 +7230,6 @@
         "node": ">=6.0"
       }
     },
-    "node_modules/ci-info": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
-      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/cjs-module-lexer": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
@@ -13126,43 +13090,6 @@
         "node": ">= 10.14.2"
       }
     },
-    "node_modules/jest-get-type": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
-      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-haste-map": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
-      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "@types/graceful-fs": "^4.1.2",
-        "@types/node": "*",
-        "anymatch": "^3.0.3",
-        "fb-watchman": "^2.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-regex-util": "^27.5.1",
-        "jest-serializer": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-worker": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "walker": "^1.0.7"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "^2.3.2"
-      }
-    },
     "node_modules/jest-jasmine2": {
       "version": "26.6.3",
       "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz",
@@ -13475,38 +13402,6 @@
         }
       }
     },
-    "node_modules/jest-regex-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
-      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-resolve": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
-      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-pnp-resolver": "^1.2.2",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "resolve": "^1.20.0",
-        "resolve.exports": "^1.1.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
     "node_modules/jest-resolve-dependencies": {
       "version": "26.6.3",
       "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz",
@@ -13551,16 +13446,6 @@
         "node": ">= 10.14.2"
       }
     },
-    "node_modules/jest-resolve/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/jest-runner": {
       "version": "26.6.3",
       "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.3.tgz",
@@ -14053,20 +13938,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jest-serializer": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
-      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/node": "*",
-        "graceful-fs": "^4.2.9"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
     "node_modules/jest-snapshot": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.2.tgz",
@@ -14239,42 +14110,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jest-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
-      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-validate": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
-      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "camelcase": "^6.2.0",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^27.5.1",
-        "leven": "^3.1.0",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
     "node_modules/jest-watcher": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.6.2.tgz",
@@ -16096,14 +15931,6 @@
         "node": "14 || >=16.14"
       }
     },
-    "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -17052,7 +16879,7 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -17066,7 +16893,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -17830,72 +17657,35 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
+      "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
+      "dependencies": {
+        "@remix-run/router": "1.7.2"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
+      "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.7.2",
+        "react-router": "6.14.2"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router-dom/node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
-    "node_modules/react-router/node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -18556,16 +18346,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/resolve.exports": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
-      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
diff --git a/package.json b/package.json
index 92230580f..f79e0bc95 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,8 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-component-footer": "12.2.1",
-    "@edx/frontend-component-header": "4.5.2",
-    "@edx/frontend-platform": "4.6.1",
+    "@edx/frontend-component-header": "4.6.0",
+    "@edx/frontend-platform": "5.0.0",
     "@edx/paragon": "^20.44.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -51,8 +51,8 @@
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.14.2",
+    "react-router-dom": "6.14.2",
     "redux": "4.2.1",
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
diff --git a/src/profile/ProfilePage.jsx b/src/profile/ProfilePage.jsx
index a1f789e61..805c138b6 100644
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -41,6 +41,8 @@ import { profilePageSelector } from './data/selectors';
 // i18n
 import messages from './ProfilePage.messages';
 
+import withParams from '../utils/hoc';
+
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
 class ProfilePage extends React.Component {
@@ -63,9 +65,9 @@ class ProfilePage extends React.Component {
   }
 
   componentDidMount() {
-    this.props.fetchProfile(this.props.match.params.username);
+    this.props.fetchProfile(this.props.params.username);
     sendTrackingLogEvent('edx.profile.viewed', {
-      username: this.props.match.params.username,
+      username: this.props.params.username,
     });
   }
 
@@ -102,7 +104,7 @@ class ProfilePage extends React.Component {
   }
 
   isAuthenticatedUserProfile() {
-    return this.props.match.params.username === this.context.authenticatedUser.username;
+    return this.props.params.username === this.context.authenticatedUser.username;
   }
 
   // Inserted into the DOM in two places (for responsive layout)
@@ -124,7 +126,7 @@ class ProfilePage extends React.Component {
 
     return (
       <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -370,10 +372,8 @@ ProfilePage.propTypes = {
   updateDraft: PropTypes.func.isRequired,
 
   // Router
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      username: PropTypes.string.isRequired,
-    }).isRequired,
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
   }).isRequired,
 
   // i18n
@@ -410,4 +410,4 @@ export default connect(
     closeForm,
     updateDraft,
   },
-)(injectIntl(ProfilePage));
+)(injectIntl(withParams(ProfilePage)));
diff --git a/src/profile/ProfilePage.test.jsx b/src/profile/ProfilePage.test.jsx
index 66358b328..89f8da733 100644
--- a/src/profile/ProfilePage.test.jsx
+++ b/src/profile/ProfilePage.test.jsx
@@ -29,7 +29,7 @@ const requiredProfilePageProps = {
   deleteProfilePhoto: () => {},
   openField: () => {},
   closeField: () => {},
-  match: { params: { username: 'staff' } },
+  params: { username: 'staff' },
 };
 
 // Mock language cookie
@@ -67,29 +67,28 @@ beforeEach(() => {
 });
 
 const ProfilePageWrapper = ({
-  contextValue, store, match, requiresParentalConsent,
+  contextValue, store, params, requiresParentalConsent,
 }) => (
   <AppContext.Provider
     value={contextValue}
   >
     <IntlProvider locale="en">
       <Provider store={store}>
-        <ProfilePage {...requiredProfilePageProps} match={match} requiresParentalConsent={requiresParentalConsent} />
+        <ProfilePage {...requiredProfilePageProps} params={params} requiresParentalConsent={requiresParentalConsent} />
       </Provider>
     </IntlProvider>
   </AppContext.Provider>
 );
 
 ProfilePageWrapper.defaultProps = {
-  match: { params: { username: 'staff' } },
+  params: { username: 'staff' },
   requiresParentalConsent: null,
-
 };
 
 ProfilePageWrapper.propTypes = {
   contextValue: PropTypes.shape({}).isRequired,
   store: PropTypes.shape({}).isRequired,
-  match: PropTypes.shape({}),
+  params: PropTypes.shape({}),
   requiresParentalConsent: PropTypes.bool,
 };
 
@@ -124,7 +123,7 @@ describe('<ProfilePage />', () => {
         <ProfilePageWrapper
           contextValue={contextValue}
           store={mockStore(storeMocks.viewOtherProfile)}
-          match={{ params: { username: 'verified' } }} // Override default match
+          params={{ username: 'verified' }} // Override default params
         />
       );
       const tree = renderer.create(component).toJSON();
@@ -279,7 +278,7 @@ describe('<ProfilePage />', () => {
         <ProfilePageWrapper
           contextValue={contextValue}
           store={mockStore(storeMocks.loadingApp)}
-          match={{ params: { username: 'test-username' } }}
+          params={{ username: 'test-username' }}
         />
       );
       const wrapper = mount(component);
diff --git a/src/routes/AppRoutes.jsx b/src/routes/AppRoutes.jsx
index 097e35973..1d46786b5 100644
--- a/src/routes/AppRoutes.jsx
+++ b/src/routes/AppRoutes.jsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import {
   AuthenticatedPageRoute,
-  PageRoute,
+  PageWrap,
 } from '@edx/frontend-platform/react';
-import { Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { ProfilePage, NotFoundPage } from '../profile';
 
 const AppRoutes = () => (
-  <Switch>
-    <AuthenticatedPageRoute path="/u/:username" component={ProfilePage} />
-    <PageRoute path="/notfound" component={NotFoundPage} />
-    <PageRoute path="*" component={NotFoundPage} />
-  </Switch>
+  <Routes>
+    <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
+    <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
+    <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
+  </Routes>
 );
 
 export default AppRoutes;
diff --git a/src/routes/routes.test.jsx b/src/routes/routes.test.jsx
index daa0ffad3..9bd40dfea 100644
--- a/src/routes/routes.test.jsx
+++ b/src/routes/routes.test.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getConfig } from '@edx/frontend-platform';
-import { Router } from 'react-router';
+import { MemoryRouter as Router } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
 import AppRoutes from './AppRoutes';
 
@@ -18,9 +17,9 @@ jest.mock('../profile', () => ({
   NotFoundPage: () => (<div>Not found page</div>),
 }));
 
-const RoutesWithProvider = (context, history) => (
+const RoutesWithProvider = (context, path) => (
   <AppContext.Provider value={context}>
-    <Router history={history}>
+    <Router initialEntries={[`${path}`]}>
       <AppRoutes />
     </Router>
   </AppContext.Provider>
@@ -32,22 +31,14 @@ const unauthenticatedUser = {
 };
 
 describe('routes', () => {
-  let history;
-
-  beforeEach(() => {
-    history = createMemoryHistory();
-  });
-
   test('Profile page should redirect for unauthenticated users', () => {
-    history.push('/u/edx');
     render(
-      RoutesWithProvider(unauthenticatedUser, history),
+      RoutesWithProvider(unauthenticatedUser, '/u/edx'),
     );
     expect(getLoginRedirectUrl).toHaveBeenCalled();
   });
 
   test('Profile page should be accessible for authenticated users', () => {
-    history.push('/u/edx');
     render(
       RoutesWithProvider(
         {
@@ -57,16 +48,15 @@ describe('routes', () => {
           },
           config: getConfig(),
         },
-        history,
+        '/u/edx',
       ),
     );
     expect(screen.getByText('Profile page')).toBeTruthy();
   });
 
   test('should show NotFound page for a bad route', () => {
-    history.push('/nonMatchingRoute');
     render(
-      RoutesWithProvider(unauthenticatedUser, history),
+      RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),
     );
     expect(screen.getByText('Not found page')).toBeTruthy();
   });
diff --git a/src/utils/hoc.jsx b/src/utils/hoc.jsx
new file mode 100644
index 000000000..2c85eaeb4
--- /dev/null
+++ b/src/utils/hoc.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { useParams } from 'react-router-dom';
+
+const withParams = (WrappedComponent) => {
+  const WithParamsComponent = (props) => <WrappedComponent params={useParams()} {...props} />;
+  return WithParamsComponent;
+};
+
+export default withParams;