I’m trying to integrate React with Okta using open id with latest versions of react-router-dom, okta-react and okta-auth-js but the problem happening is that SecureRoute is no longer works because it isn’t a valid child of Routes.
Previously we used to write like this :-
<SecureRoute path='/' exact={true} component={Home} />
<SecureRoute path='/private' exact={true} component={Private} />
<Route exact path="/login/callback" component={LoginCallback} />
And with new version I’m writing like this :-
<Security oktaAuth={oktaAuth}
onAuthRequired={customAuthHandler}
restoreOriginalUri={restoreOriginalUri}
<Routes>
<Route path='/login' element={<Home />} />
<Route path='/' element={<Header />} />
<Route exact path="/login/callback" element={<LoginCallback />} />
</Routes>
</Security>
The issue is these routes doesn’t work as Secure Routes, what’s the solution for this? If we need to create a custom secure route component and wrap around the application can someone guide me on that?
This error will occur if we use Route directly without wrapping it within Routes in latest versions of react router dom