React SPA Application Routing not working

Hello Everyone,

I am new to okta and trying to integrate okta in my application.
I am using below metioned version of okta

@okta/okta-auth-js”: “6.7.2”,
@okta/okta-react”: “^6.5.0”,
@okta/okta-signin-widget”: “^6.4.2”

I am able to login through Okta successfully in the application after “/login/callback” I am redirecting to staff component that is my “/” path .

Below is the code of App.tsx

function App() {
const history = useHistory();
const restoreOriginalUri = async (_oktaAuth, originalUri) => {
history.replace(toRelativeUrl(originalUri || “/”, window.location.origin));
const oktaAuthConfig = new OktaAuth(config);
const CALLBACK_PATH = “/login/callback”;

  <div className="container">
  <Security oktaAuth={oktaAuthConfig} restoreOriginalUri={restoreOriginalUri}>
    <Route path={CALLBACK_PATH} exact component={LoginCallback} />
    <SecureRoute path="/" exact component={Staff} />

export default App;

But on Staff component, routing is not working, when I click on any link it goes to blank screen. Here is the code of my staff component.

export function Staff() {

        <Link to="/topics">Topics</Link>
        <Link to="/home">Home</Link>
    <hr />
      <Route path="/topics">
        <Topics />
      <Route path="/home">
        <Home />


export default Staff;

My main concern is to load the header and footer component only after the user is logged in, and navigation should work through the header part.

Even I tried using useOktaAuth hook on app.tsx to check isAuthenticated but it always returns undefined.

Request you to help me with this.
Thanks in advance.

Issue resolved , created a child component.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.