use react-router v6

Author: denysoblohin-okta

custom-login/package.json

@@ -3,15 +3,16 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@okta/okta-react": "^3.0.8",
+    "@okta/okta-react": "github:okta/okta-react#OKTA-318565-react-router-6",
     "@okta/okta-signin-widget": "^4.5.0",
     "colors": "^1.1.2",
     "cross-env": "^5.1.3",
     "dotenv": "^8.1.0",
     "jquery": "^3.4.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-router-dom": "^5.0.0",
+    "history": "^5.0.0",
+    "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "^4.0.0",
     "semantic-ui-css": "^2.2.12",
     "semantic-ui-react": "^2.0.1",

custom-login/src/App.jsx

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import { BrowserRouter as Router, Route, useHistory } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
 import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
 import { Container } from 'semantic-ui-react';
 import config from './config';
@@ -22,11 +22,11 @@ import Navbar from './Navbar';
 import Profile from './Profile';
 
 const HasAccessToRouter = () => {
-  const history = useHistory(); // example from react-router
+  const navigate = useNavigate(); // example from react-router
 
   const customAuthHandler = () => {
     // Redirect to the /login page that has a CustomLoginComponent
-    history.push('/login');
+    navigate('/login');
   };
 
   return (
@@ -36,11 +36,13 @@ const HasAccessToRouter = () => {
     >
       <Navbar />
       <Container text style={{ marginTop: '7em' }}>
-        <Route path="/" exact component={Home} />
-        <Route path="/login/callback" component={LoginCallback} />
-        <Route path="/login" component={CustomLoginComponent} />
-        <SecureRoute path="/messages" component={Messages} />
-        <SecureRoute path="/profile" component={Profile} />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login/callback" element={<LoginCallback />} />
+          <Route path="/login" element={<CustomLoginComponent />} />
+          <SecureRoute path="/profile/*" element={<Profile />} />
+          <SecureRoute path="/messages/*" element={<Messages />} />
+        </Routes>
       </Container>
     </Security>
   );

okta-hosted-login/package.json

@@ -3,13 +3,14 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@okta/okta-react": "^3.0.7",
+    "@okta/okta-react": "github:okta/okta-react#OKTA-318565-react-router-6",
     "colors": "^1.4.0",
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
+    "history": "^5.0.0",
+    "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "^4.0.0",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^1.2.1",

okta-hosted-login/src/App.jsx

@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
 import { Container } from 'semantic-ui-react';
 import config from './config';
@@ -25,10 +25,12 @@ const App = () => (
     <Security {...config.oidc}>
       <Navbar />
       <Container text style={{ marginTop: '7em' }}>
-        <Route path="/" exact component={Home} />
-        <Route path="/login/callback" component={LoginCallback} />
-        <SecureRoute path="/messages" component={Messages} />
-        <SecureRoute path="/profile" component={Profile} />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login/callback" element={<LoginCallback />} />
+          <SecureRoute path="/profile/*" element={<Profile />} />
+          <SecureRoute path="/messages/*" element={<Messages />} />
+        </Routes>
       </Container>
     </Security>
   </Router>