react-template/src/AppRoutes.js

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

import LoginPage from "./pages/LoginPage/LoginPage";
import RegisterPage from "pages/RegisterPage/RegisterPage";
import HomePage from "pages/HomePage/HomePage";
import RequireAuth from "components/RequireAuth/RequireAuth";
import AuthCallback from "pages/AuthCallbackPage/AuthCallbackPage";
import ProfilePage from "pages/ProfilePage/ProfilePage";
import SettingsPage from "pages/SettingsPage/SettingsPage";
import Error from "pages/ErrorPage/ErrorPage";
import { PAGES } from "constants/pages";

const AppRoutes = () => (
  <Routes>
    <Route
      path={PAGES.LOGIN.route}
      element={<LoginPage />}
      errorElement={<Error />}
    />
    <Route
      exact
      path={PAGES.REGISTER.route}
      element={<RegisterPage />}
      errorElement={<Error />}
    />
    <Route path="api/auth/:provider/callback" element={<AuthCallback />} />
    <Route element={<RequireAuth />} errorElement={<Error />}>
      <Route path={PAGES.BASE.route} element={<HomePage />} />
      <Route path="/profile/*" element={<ProfilePage />} />
      <Route path="settings" element={<SettingsPage />} />
    </Route>
  </Routes>
);

export default AppRoutes;