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';
import HelpPage from './views/HelpPage';
import SubscriptionPage from './views/SubscriptionPage';
import OnboardPage from "./views/OnboardPage";
import AccPWDResetPage from './views/AccPWDResetPage';
import ProfileCompletePage from './views/ProfileCompletePage';
import SubscribePage from './views/Subscribe'
import StartPage from "./views/StartPage";
import TrafficPage from "./views/TrafficPage";
import MyMediaPage from './views/MyMediaPage.jsx';

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.accreset} element={<AccPWDResetPage/>}/>
                        <Route path={siteLinks.error} element={<LoginPage/>}/>
                    </Route>

                    {/* protected routes */}
                    <Route element={<SocketIOContextProvider/>}>
                        <Route element={<UserExist/>}>
                            <Route path={siteLinks.start} element={<StartPage/>}/>
                            <Route path={siteLinks.dash} element={<HomePage/>}/>
                            <Route path={siteLinks.traffic} element={<TrafficPage/>}/>
                            <Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
                            <Route path={siteLinks.product} element={<ProductPage/>}/>
                            <Route path={siteLinks.reports} element={<ReportsPage/>}/>
                            <Route path={siteLinks.my_media} element={<MyMediaPage />}/>
                            <Route path={siteLinks.comments} element={<CommentsPage/>}/>
                            <Route path={siteLinks.contacts} element={<ContactsPage/>}/>
                            <Route path={siteLinks.user} element={<UserPage/>}/>
                            <Route path={siteLinks.subscription} element={<SubscriptionPage/>}/>
                            <Route path={siteLinks.subscription_success} element={<SubscriptionPage/>}/>
                            <Route path={siteLinks.onboard} element={<OnboardPage/>}/>
                            <Route path={siteLinks.calendar} element={<CalendarPage/>}/>
                            <Route path={siteLinks.settings} element={<SettingsPage/>}/>
                            <Route path={siteLinks.subscribe} element={<SubscribePage/>}/>
                            <Route path={siteLinks.help} element={<HelpPage/>}/>
                        </Route>
                    </Route>
                </Route>
            </Routes>
        </div>
    );
}

export default AppRouters;