App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Security, ImplicitCallback } from '@okta/okta-react';
import { OktaAuthComponent, OktaLogout } from './OktaAuthComponent.js'

const config = {
  issuer: 'https://*****.oktapreview.com/oauth2/default',   // replace this with your okta dev url
  redirect_uri: window.location.origin + '/implicit/callback',
  client_id: '****'   // replace this with your okta client_id
}

function Profile() {
  return (<h1>Welcome to profile page</h1>)
}
          
function AboutUs() {
  return (<h1>Welcome to About Us page </h1>)
}

class CustomRoute extends Component {
  render() {
  const { Component, path, exact, passedProps} = this.props;
  return (
    <Route
      path={path}
      exact={exact}
      render={props => <Component {...props} {...passedProps} />}
    />
  );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Security issuer={ config.issuer } client_id={ config.client_id } redirect_uri={ config.redirect_uri }>
            <OktaAuthComponent>
              <CustomRoute path='/' exact={ true } Component={ Home } />
              <CustomRoute path='/profile' Component={ Profile } />
              <Route path='/aboutus' component={ AboutUs } />
              {/** You can pass your rest of the componets in here with independent routes **/}
            </OktaAuthComponent>
            <Route path='/implicit/callback' component={ ImplicitCallback }/>
            <Route path='/logout' component={ OktaLogout } />
          </Security>
        </BrowserRouter>
      </div>
    );
  }
}