MermsPanelReactJS/src/AppRouters.jsx

import { Routes, Route } from 'react-router-dom';

import UserExist from './component/authorization/UserExist';
import AuthLayout from './component/auth/AuthLayout';
import BearerToken from './component/authorization/BearerToken';
import siteLinks from './links/siteLinks';

import LoginPage from './views/LoginPage';
import SignupPage from './views/SignupPage';
import ForgetpwdPage from './views/ForgetpwdPage';
import HomePage from './views/HomePage';
import ReportsPage from './views/ReportsPage'
import CommentsPage from './views/CommentsPage'
import ContactsPage from './views/ContactsPage'
import UserPage from './views/UserPage'
import CalendarPage from './views/CalendarPage'
import SettingsPage from './views/SettingsPage'
import ProductPage from './views/ProductPage'
import SocketIOContextProvider from './component/context/SocketIOContext';
import CSignupPage from './views/CSignupPage';

function AppRouters() {
  return (
    <div className="">
      <Routes>
        <Route element={<BearerToken />}>
          {/* auth routes wrapper */}
          <Route element={<AuthLayout />}>
            <Route path={siteLinks.home} element={<LoginPage />} />
            <Route path={siteLinks.login} element={<LoginPage />} />
            <Route path={siteLinks.signup} element={<SignupPage />} />
            <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
            <Route path={siteLinks.csignup} element={<CSignupPage />} />
            <Route path={siteLinks.error} element={<LoginPage />} />
          </Route>

          {/* protected routes */}
          <Route element={<SocketIOContextProvider />}>
            <Route element={<UserExist />}> 
              <Route path={siteLinks.dash} element={<HomePage />} />
              <Route path={siteLinks.product} element={<ProductPage />} />
              <Route path={siteLinks.reports} element={<ReportsPage />} />
              <Route path={siteLinks.comments} element={<CommentsPage />} />
              <Route path={siteLinks.contacts} element={<ContactsPage />} />
              <Route path={siteLinks.user} element={<UserPage />} />
              <Route path={siteLinks.calendar} element={<CalendarPage />} />
              <Route path={siteLinks.settings} element={<SettingsPage />} />
            </Route>
          </Route>
        </Route>
      </Routes>
    </div>
  );
}

export default AppRouters;