code

app.js

import React, { Component, lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './Components/Login/Login';
import Phone from './Components/Login/Phone';
import ScrollToTop from './ScrollToTop';
import axios from 'axios';
import { StylesProvider } from '@material-ui/core/styles';
import { PageView, initGA } from './Tracking';
import { CircularProgress } from '@material-ui/core';
import './index.css';

// protected router
export const instance = axios.create({
    baseURL: '/api',
    headers: { authorization: `bearer ${localStorage.getItem('jwt_token')}` },
});

let urls = [
    'http://localhost:3000/',
    'https://pre.algokart.in/',
    'https://pre.algokart.com/',
    'https://algokart.in/',
    'https://algokart.com/',
    'https://stratzy.in',
];

// Handle redirect responses
instance.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        if (
            error.response &&
            error.response.data &&
            error.response.data.location
        ) {
            if (
                !window.location.href.includes('/login') &&
                !window.location.href.includes('/phone') &&
                !window.location.href.includes('/waitlist') &&
                !urls.includes(window.location.href)
            ) {
                if (!localStorage.getItem('jwt_token')) {
                    return (window.location.href = '/');
                }
                return (window.location.href = error.response.data.location);
            }
        } else {
            return Promise.reject(error);
        }
    }
);

// Assign authorization token
instance.interceptors.request.use(
    function (config) {
        const jwt_token = localStorage.getItem('jwt_token');
        if (jwt_token) {
            config.headers['authorization'] = `Bearer ${jwt_token}`;
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

const Home = lazy(() => import('./Components/Home/Home'));
const Error = lazy(() => import('./Components/ErrorPage/error'));
const ErrorUnauthorized = lazy(() =>
    import('./Components/ErrorPage/unauthorized')
);
/*
 * Inside Dashboard
 */
const Explore = lazy(() =>
    import(
        './Components/Dashboard/Explore/Explore' /* webpackChunkName: "dashboard" */
    )
);
const LiveTest = lazy(() =>
    import('./Components/LiveTest/LiveTest' /* webpackChunkName: "dashboard" */)
);
const Waitlist = lazy(() =>
    import('./Components/Waitlist/Waitlist' /* webpackChunkName: "dashboard" */)
);
const Dashboard = lazy(() =>
    import(
        './Components/Dashboard/Dashboard' /* webpackChunkName: "dashboard" */
    )
);
const Referral = lazy(() =>
    import(
        './Components/Dashboard/Referral/Referral' /* webpackChunkName: "dashboard" */
    )
);
const MyActivity = lazy(() =>
    import(
        './Components/Dashboard/MyActivity/MyActivity' /* webpackChunkName: "dashboard" */
    )
);
const Profile = lazy(() =>
    import(
        './Components/Dashboard/Profile/Profile' /* webpackChunkName: "dashboard" */
    )
);
const OrderBook = lazy(() =>
    import(
        './Components/Dashboard/Profile/OrderbookDialog/OrderbookDialog' /* webpackChunkName: "dashboard" */
    )
);
const LoggedInLayout = lazy(() =>
    import(
        './Components/LoggedInLayout/LoggedInLayout' /* webpackChunkName: "dashboard" */
    )
);

class App extends Component {
    componentDidMount() {
        initGA('UA-162867301-1');
        PageView();
    }

    //  get ready for astronomical returns
    render() {
        return (
            <StylesProvider injectFirst>
                <Router>
                    <Suspense
                        fallback={
                            <div
                                style={{
                                    height: '100vh',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                }}
                            >
                                <CircularProgress />
                            </div>
                        }
                    >
                        <Switch>
                            <ScrollToTop>
                                <Route path="/login" render={() => <Login />} />
                                <Route
                                    path="/waitlist"
                                    render={() => <Waitlist />}
                                />

                                <Route exact path="/" render={() => <Home />} />
                                <Route
                                    path="/api"
                                    render={() => <ErrorUnauthorized />}
                                />
                                <Route
                                    path="/phone"
                                    render={() => (
                                        <LoggedInLayout child={<Phone />} />
                                    )}
                                />
                                <Route
                                    path="/dashboard"
                                    render={() => (
                                        <LoggedInLayout child={<Dashboard />} />
                                    )}
                                />
                                <Route
                                    path="/referrals"
                                    render={() => (
                                        <LoggedInLayout child={<Referral />} />
                                    )}
                                />
                                <Route
                                    path="/activity"
                                    render={(props) => (
                                        <LoggedInLayout
                                            child={<MyActivity />}
                                        />
                                    )}
                                />
                                <Route
                                    path="/profile"
                                    render={(props) => (
                                        <LoggedInLayout
                                            child={<Profile {...props} />}
                                        />
                                    )}
                                />
                                <Route
                                    path="/orderbook"
                                    render={() => (
                                        <LoggedInLayout child={<OrderBook />} />
                                    )}
                                />
                                <Route
                                    path="/explore"
                                    render={() => (
                                        <LoggedInLayout child={<Explore />} />
                                    )}
                                />
                                <Route
                                    path="/livetest"
                                    render={() => (
                                        <LoggedInLayout child={<LiveTest />} />
                                    )}
                                />
                                <Route render={() => <Error />} />
                            </ScrollToTop>
                        </Switch>
                    </Suspense>
                </Router>
            </StylesProvider>
        );
    }
}

export default App;

The route i am using to display error page <Route render={() => <Error />} /> , look at the bottom.