AppWrapper.tsx

import { Suspense, lazy } from 'react';
import { Switch } from 'react-router-dom';

import ProtectedRoute from 'components/helpers/ProtectedRoute';
import Header from 'components/navigation/Header';

const Tasks = lazy(() => import('pages/Tasks'));
const TaskDetail = lazy(() => import('pages/Tasks/TaskDetail'));
const TaskStart = lazy(() => import('pages/Tasks/TaskStart'));
const ProjectDetail = lazy(() => import('pages/Projects/ProjectDetail'));
const Projects = lazy(() => import('pages/Projects'));
const Stats = lazy(() => import('pages/Stats'));
const TeamsEdit = lazy(() => import('pages/Teams/TeamsEdit'));
const Teams = lazy(() => import('pages/Teams'));
const Settings = lazy(() => import('pages/Settings'));


export default function AppWrapper() {
    return (
        <Header>
            <Suspense fallback={false}>
                <Switch>
                    <ProtectedRoute path="/tasks/:uuid/start" component={TaskStart} />
                    <ProtectedRoute path="/tasks/:uuid" component={TaskDetail} />
                    <ProtectedRoute path="/tasks" exact component={Tasks} />
                    <ProtectedRoute path="/projects/:uuid" component={ProjectDetail} />
                    <ProtectedRoute path="/projects" component={Projects} />
                    <ProtectedRoute path="/stats" component={Stats} />
                    <ProtectedRoute path="/settings" component={Settings} />
                    <ProtectedRoute path="/teams/:teamId/edit" exact component={TeamsEdit} />
                    <ProtectedRoute path={['/teams/:teamId', '/teams']} component={Teams} />
                </Switch>
            </Suspense>
        </Header>
    );
}