404 page on my react project appears when I route to /supportservice/settings

Question

Whenever I route to /supportservice/settings page while this page loads 404 page will appear to the screen after a while /supportservice/settings page will appear on the screen. I have tried my best to make 404 page stop showing when I route to /supportservice/settings. The supportservice has backend data fetching which takes a little time, while loading 404 page renders on the screen, supportservice lenders in a while after data fetching. I have been on this for days.

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Loader from './loader';
import AuthProvider from './authContext';
const SupportServiceDashboard = React.lazy(() =>
  import('../components/support-service/Dashboard/supportServiceDashboard')
);
const PrivateRoute = React.lazy(() =>
  import('./privateRoute')
);
const SupportServiceConfirmationPage = React.lazy(() =>
  import('./adminConfirmationPage')
);
const SupportServiceResetPassword = React.lazy(() => 
  import('../components/support-service/registration/resetPassword')
);
const PersonnelDashboard = React.lazy(() => 
  import('../components/personnel/home/personnelDashboard')
);
const Signup = React.lazy(() =>
  import('../components/personnel/registration/signUp')
);
const SignIn = React.lazy(() =>
  import('../components/personnel/registration/signIn')
);
const ResetPassword = React.lazy(() =>
  import('../components/personnel/registration/resetPassword')
);
const ForgetPassword = React.lazy(() =>
  import('../components/personnel/registration/forgetPassword')
);
const SupportServiceSignUp = React.lazy(() =>
  import('../components/support-service/registration/supportServiceSignUp')
);
const SupportServiceSignIn = React.lazy(() =>
  import('../components/support-service/registration/supportServiceSignIn')
);
const SupportServiceForgetPassword = React.lazy(() =>
  import('../components/support-service/registration/supportServiceForgetPassword')
);
const ConfirmPage = React.lazy(() =>
  import('./confirmPage')
);
const SupportServiceNavBar = React.lazy(() =>
  import('../components/support-service/supportServiceNavbar')
);
const ManageTimesheet = React.lazy(() =>
  import('../components/support-service/Manage-timesheet/ManageTimesheet')
);
const SupportServiceSettings = React.lazy(() => 
  import('../components/support-service/settings_page/supportServiceSettings')
);
const PersonnelList = React.lazy(() => import('../components/support-service/settings_page/personnel-list'));

const PageNotFound = React.lazy(() => import('../utils/pageNotFound'));

const ClientList = React.lazy(() => import('../components/support-service/settings_page/clientList'));


function Routes() {
  const change = true;
  return (
    <div className="App">
      {/* <Nav /> */}
      <Router>
        <AuthProvider>
        <Switch>
          <Suspense fallback={<Loader />}>
            <Route exact path="/" component={SignIn} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/login" component={SignIn} />
            <Route exact path="/forgotpassword" component={ForgetPassword} />
            <Route exact path="/passwordreset/:id" component={ResetPassword} />
            <Route exact path="/supportservice/passwordreset/:id" component={SupportServiceResetPassword} />
            <Route exact path="/supportservice/signup" component={SupportServiceSignUp} />
            <Route
              exact
              path="/supportservice/login"
              component={SupportServiceSignIn}
            />
            <Route
              exact
              path="/login/:id"
              component={ConfirmPage}
            />
            <Route
              exact
              path="/supportservice/login/:id"
              component={SupportServiceConfirmationPage}
            />
            <Route
              exact
              path="/supportservice/forgotpassword"
              component={SupportServiceForgetPassword}
            />
            {/* <Route
              exact
              path="/pagenotfound"
              component={PageNotFound}
            /> */}

            <Route
              exact
              path="/supportservice/forgotpassword"
              component={SupportServiceForgetPassword}
            />
            <Route
              exact
              path="/supportservice/nav"
              component={SupportServiceNavBar}
            />
            <Route
              exact
              path="/supportservice/manage-timesheet"
              component={ManageTimesheet}
            />


            <PrivateRoute exact path='/supportservice/dashboard' component={SupportServiceDashboard} role='support_service' redirect='/supportservice/login'/>
            <PrivateRoute exact path='/dashboard' component={PersonnelDashboard} role='personnel' redirect='/login'/>
            <PrivateRoute exact path='/supportservice/settings' component={SupportServiceSettings} role='support_service' redirect='/supportservice/login'/>
             <PrivateRoute path='/supportservice/settings/personnel_list' component={PersonnelList} role='support_service' redirect='/supportservice/login'/>
            <PrivateRoute path='/supportservice/settings/client_list' component={ClientList} role='support_service' redirect='/supportservice/login'/>

            <Route component={PageNotFound} />
          </Suspense>
        </Switch>
        </AuthProvider>
      </Router>
    </div>
  );
}

export default Routes;

Answer 1

After some days of research on this issue I found out that I have to use react Suspense as the parent container for all the route, this fixed the error. Thanks to all especially those that posted some suggestions. Happy coding :).

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ReduxToastr from 'react-redux-toastr';
import Loader from './loader';
const SupportServiceDashboard = React.lazy(() =>
    import('../components/support-service/Dashboard/supportServiceDashboard')
);
const PrivateRoute = React.lazy(() => import('./privateRoute'));
const SupportServiceConfirmationPage = React.lazy(() => import('./adminConfirmationPage'));
const SupportServiceResetPassword = React.lazy(() =>
    import('../components/support-service/registration/resetPassword')
);
const PersonnelDashboard = React.lazy(() => import('../components/personnel/home/personnelDashboard'));
const Signup = React.lazy(() => import('../components/personnel/registration/signUp'));
const SignIn = React.lazy(() => import('../components/personnel/registration/signIn'));
const ResetPassword = React.lazy(() => import('../components/personnel/registration/resetPassword'));
const ForgetPassword = React.lazy(() => import('../components/personnel/registration/forgetPassword'));
const SupportServiceSignUp = React.lazy(() =>
    import('../components/support-service/registration/supportServiceSignUp')
);
const SupportServiceSignIn = React.lazy(() =>
    import('../components/support-service/registration/supportServiceSignIn')
);
const SupportServiceForgetPassword = React.lazy(() =>
    import('../components/support-service/registration/supportServiceForgetPassword')
);
const ConfirmPage = React.lazy(() => import('./confirmPage'));
// const SupportServiceNavBar = React.lazy(() => import('../components/support-service/supportServiceNavbar'));
const ManageTimesheet = React.lazy(() => import('../components/support-service/Manage-timesheet/ManageTimesheet'));
const SupportServiceSettings = React.lazy(() =>
    import('../components/support-service/settings_page/supportServiceSettings')
);
const PersonnelList = React.lazy(() => import('../components/support-service/settings_page/personnel-list'));

const PageNotFound = React.lazy(() => import('../utils/pageNotFound'));

const ClientList = React.lazy(() => import('../components/support-service/settings_page/clientList'));

function Routes() {
    return (
        <Suspense fallback={<Loader />}>
            <Router>
                {/* <div className="App"> */}
                <ReduxToastr
                    timeOut={5000}
                    newestOnTop={false}
                    preventDuplicates
                    position="top-center"
                    getState={state => state.toastr}
                    transitionIn="fadeIn"
                    transitionOut="fadeOut"
                    progressBar
                    closeOnToastrClick
                />
                <Switch>
                    <Route exact path="/" component={SignIn} />
                    <PrivateRoute path="/" exact component={PersonnelDashboard} role="personnel" redirect="/login" />
                    <PrivateRoute
                        path="/supportservice"
                        exact
                        component={SupportServiceDashboard}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <Route path="/signup" exact component={Signup} />
                    <Route path="/login" exact component={SignIn} />
                    <Route path="/forgotpassword" exact component={ForgetPassword} />
                    <Route path="/passwordreset/:id" exact component={ResetPassword} />
                    <Route exact path="/supportservice/passwordreset/:id" component={SupportServiceResetPassword} />
                    <Route path="/supportservice/signup" component={SupportServiceSignUp} />
                    <Route exact path="/supportservice/login" component={SupportServiceSignIn} />
                    <Route exact path="/login/:id" component={ConfirmPage} />
                    <Route exact path="/supportservice/login/:id" component={SupportServiceConfirmationPage} />
                    <Route path="/supportservice/forgotpassword" component={SupportServiceForgetPassword} />
                    <Route exact path="/supportservice/forgotpassword" component={SupportServiceForgetPassword} />
                    <Route exact path="/supportservice/manage-timesheet" component={ManageTimesheet} />

                    <PrivateRoute
                        exact
                        path="/supportservice/dashboard"
                        component={SupportServiceDashboard}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <PrivateRoute exact path="/dashboard" component={PersonnelDashboard} role="personnel" redirect="/login" />
                    <PrivateRoute
                        exact
                        path="/supportservice/settings"
                        component={SupportServiceSettings}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <PrivateRoute
                        exact
                        path="/supportservice/settings/personnel_list"
                        component={PersonnelList}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <PrivateRoute
                        path="/supportservice/settings/client_list"
                        component={ClientList}
                        role="support_service"
                        redirect="/supportservice/login"
                    />
                    <Route component={PageNotFound} />
                </Switch>
            </Router>
        </Suspense>
    );
}

export default Routes;

Answer 2

Just remove path=" " from PageNotFound Route.

       <Route exact component={PageNotFound} />

Answer 3

Try <Route exact path='*' component={PageNotFound} />