routes.js

import React from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';

import AboutUs from '../components/AboutUs';
import ContactUs from '../components/ContactUs';
import Main from '../components/Main';
import Home from '../components/Home';
import Register from '../components/register/index';
import Login from '../components/login';
import NotFound from '../components/NotFound';
import EmailVerify from '../components/email-verficiation/EmailVerify';
import ForgotPassword from '../components/forgot-password/ForgotPasswordForm';
import NewDevice from '../components/new-device/NewDevice';
import ResetPassword from '../components/forgot-password/ResetPassword';
import Subscriptions from '../components/subscriptions';
import UnderReview from '../components/subscriptions/underreview';
import TermsAndConditions from '../components/subscriptions/termsandconditions';
import PaymentProccessed from '../components/payments/paymentproccessed';
import Payment from '../components/payments';
import PreLoginAbout from '../components/pre-login/about-us';
import Investing from '../components/pre-login/investing';
import Benefits from '../components/pre-login/benefits';
import Portfolios from '../components/pre-login/portfolios';
import Empower from '../components/pre-login/empower';
import Faq from '../components/pre-login/faq';
import Asset from '../components/pre-login/asset';
import UploadPlans from '../components/subscriptions/upload_plans';
import ConfirmUpdate from '../components/subscriptions/confirmupload';
import SupportSuccess from '../components/request-support/success';

export default () => (
  <BrowserRouter>
    <Main>
      <Switch>
        <Route path="/" exact render={(props) => <PreLoginAbout {...props} />}/>
        <Route path="/about" exact render={(props) => <AboutUs {...props} />}/>
        <Route path="/contact" exact render={(props) => <ContactUs {...props} />}/>
        <Route
          path="/register"
          exact
          render={(props) => (
            <Register
              {...props}
              step={(props.location.state && props.location.state.step) || 1}
            />
          )}
        />
        <Route
          path="/email-verify/:token"
          exact
          render={(props) => <EmailVerify {...props} />}
        />
        <Route
          path="/new-device-detected"
          exact
          render={(props) => <NewDevice {...props} />}
        />
        <Route path="/login" exact render={(props) => <Login {...props} />}/>
        <Route path="/home" exact render={(props) => <Home {...props} />}/>
        <Route
          path="/forgot-password"
          exact
          render={(props) => <ForgotPassword {...props} />}
        />
        <Route
          path="/change-password/:token"
          exact
          render={(props) => <ResetPassword {...props} />}
        />
        <Route
          path="/subscription"
          exact
          render={(props) => <Subscriptions {...props} />}
        />
        <Route path="/underreview" exact render={(props) => <UnderReview {...props} />}/>
        <Route
          path="/termsandconditions"
          exact
          render={(props) => <TermsAndConditions {...props} />}
        />
        <Route
          path="/paymentproccessed"
          exact
          render={(props) => <PaymentProccessed {...props} />}
        />
        <Route path="/payment" exact render={(props) => <Payment {...props} />}/>
        <Route path="/investing" exact render={(props) => <Investing {...props} />}/>
        <Route path="/benefits" exact render={(props) => <Benefits {...props} />}/>
        <Route path="/portfolios" exact render={(props) => <Portfolios {...props} />}/>
        <Route path="/empower" exact render={(props) => <Empower {...props} />}/>
        <Route path="/faq" exact render={(props) => <Faq {...props} />}/>
        <Route path="/asset" exact render={(props) => <Asset {...props} />}/>
        <Route path="/uploadplans" exact render={(props) => <UploadPlans {...props} />}/>
        <Route
          path="/support-success"
          exact
          render={(props) => <SupportSuccess {...props} />}
        />

        <Route
          path="/confirmupload"
          exact
          render={(props) => <ConfirmUpdate {...props} />}
        />
        <Route render={(props) => <NotFound {...props} />}/>
      </Switch>
    </Main>
  </BrowserRouter>
);

Did this use role based authentication in react-router-dom worked for you? How? https://stackoverflow.com/questions/49390063/how-to-use-role-based-authentication-in-react-router-dom