Migrate to react-router v6

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+# 3.0.0
+
+### Breaking Changes
+- uses `@okta/okta-react` 4
+- requires `react-router` 6 beta
+
 ## 2.0.0
 
 ### Breaking Changes

custom-login/package.json

@@ -3,16 +3,17 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@okta/okta-react": "github:okta/okta-react#OKTA-318565-react-router-6",
     "@okta/okta-auth-js": "^4.2.0",
-    "@okta/okta-react": "^4.0.0",
     "@okta/okta-signin-widget": "^5.0.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 { Route, useHistory, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
 import { OktaAuth } from '@okta/okta-auth-js';
 import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
 import { Container } from 'semantic-ui-react';
@@ -25,11 +25,11 @@ import Profile from './Profile';
 const oktaAuth = new OktaAuth(config.oidc);
 
 const App = () => {
-  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 (
@@ -39,13 +39,13 @@ const App = () => {
     >
       <Navbar />
       <Container text style={{ marginTop: '7em' }}>
-        <Switch>
-          <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} />
-        </Switch>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login/callback" element={<LoginCallback />} />
+          <Route path="/login" element={<CustomLoginComponent />} />
+          <SecureRoute path="/messages/*" element={<Messages />} />
+          <SecureRoute path="/profile/*" element={<Profile />} />
+        </Routes>
       </Container>
     </Security>
   );

okta-hosted-login/package.json

@@ -4,13 +4,14 @@
   "private": true,
   "dependencies": {
     "@okta/okta-auth-js": "^4.2.0",
-    "@okta/okta-react": "^4.0.0",
+    "@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, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { OktaAuth } from '@okta/okta-auth-js';
 import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
 import { Container } from 'semantic-ui-react';
@@ -24,18 +24,16 @@ import Profile from './Profile';
 const oktaAuth = new OktaAuth(config.oidc);
 
 const App = () => (
-  <Router>
-    <Security oktaAuth={oktaAuth}>
-      <Navbar />
-      <Container text style={{ marginTop: '7em' }}>
-        <Switch>
-          <Route path="/" exact component={Home} />
-          <Route path="/login/callback" component={LoginCallback} />
-          <SecureRoute path="/messages" component={Messages} />
-          <SecureRoute path="/profile" component={Profile} />
-        </Switch>
-      </Container>
-    </Security>
-  </Router>
+  <Security oktaAuth={oktaAuth}>
+    <Navbar />
+    <Container text style={{ marginTop: '7em' }}>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login/callback" element={<LoginCallback />} />
+        <SecureRoute path="/messages/*" element={<Messages />} />
+        <SecureRoute path="/profile/*" element={<Profile />} />
+      </Routes>
+    </Container>
+  </Security>
 );
 export default App;

okta-hosted-login/src/index.js

@@ -12,12 +12,18 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import 'semantic-ui-css/semantic.min.css';
 import './polyfills';
 import App from './App';
 import './index.css';
 import registerServiceWorker from './registerServiceWorker';
 
 /* eslint-disable react/jsx-filename-extension */
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById('root'),
+);
 registerServiceWorker();