WhiteNightsAdminPanel/src/app/router/index.tsx

import {
  CreateSightPage,
  DevicesPage,
  EditSightPage,
  LoginPage,
  MainPage,
  SightListPage,
  MapPage,
  MediaListPage,
  MediaPreviewPage,
  MediaEditPage,
  CountryListPage,
  CityListPage,
  RouteListPage,
  UserListPage,
  SnapshotListPage,
  CarrierListPage,
  StationListPage,
  // VehicleListPage,
  ArticleListPage,

  // CountryPreviewPage,
  // VehiclePreviewPage,
  // CarrierPreviewPage,
  SnapshotCreatePage,
  CountryCreatePage,
  CityCreatePage,
  CarrierCreatePage,
  // VehicleCreatePage,
  CountryEditPage,
  CityEditPage,
  UserCreatePage,
  UserEditPage,
  // VehicleEditPage,
  CarrierEditPage,
  StationCreatePage,
  StationPreviewPage,
  StationEditPage,
  RouteCreatePage,
  RoutePreview,
  RouteEditPage,
  ArticlePreviewPage,
} from "@pages";
import { authStore, createSightStore, editSightStore } from "@shared";
import { Layout } from "@widgets";
import { runInAction } from "mobx";
import React, { useEffect } from "react";

import {
  createBrowserRouter,
  RouterProvider,
  Navigate,
  Outlet,
  useLocation,
} from "react-router-dom";

const PublicRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated } = authStore;
  if (isAuthenticated) {
    return <Navigate to="/sight" replace />;
  }
  return <>{children}</>;
};

const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated } = authStore;
  const location = useLocation();
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  if (location.pathname === "/") {
    return <Navigate to="/sight" replace />;
  }
  return <>{children}</>;
};

// Чтобы очистка сторов происходила при смене локации
const ClearStoresWrapper: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const location = useLocation();

  useEffect(() => {
    editSightStore.clearSightInfo();
    createSightStore.clearCreateSight();
    runInAction(() => {
      editSightStore.hasLoadedCommon = false;
    });
  }, [location]);

  return <>{children}</>;
};

const router = createBrowserRouter([
  {
    path: "/login",
    element: (
      <PublicRoute>
        <LoginPage />
      </PublicRoute>
    ),
  },
  { path: "route-preview/:id", element: <RoutePreview /> },
  {
    path: "/",
    element: (
      <ProtectedRoute>
        <Layout>
          <ClearStoresWrapper>
            <Outlet />
          </ClearStoresWrapper>
        </Layout>
      </ProtectedRoute>
    ),
    children: [
      { index: true, element: <MainPage /> },

      // Sight
      { path: "sight", element: <SightListPage /> },
      { path: "sight/create", element: <CreateSightPage /> },
      { path: "sight/:id/edit", element: <EditSightPage /> },

      // Device
      { path: "devices", element: <DevicesPage /> },

      // Map
      { path: "map", element: <MapPage /> },

      // Media
      { path: "media", element: <MediaListPage /> },
      { path: "media/:id", element: <MediaPreviewPage /> },
      { path: "media/:id/edit", element: <MediaEditPage /> },

      // Country
      { path: "country", element: <CountryListPage /> },
      { path: "country/create", element: <CountryCreatePage /> },
      // { path: "country/:id", element: <CountryPreviewPage /> },
      { path: "country/:id/edit", element: <CountryEditPage /> },
      // City
      { path: "city", element: <CityListPage /> },
      { path: "city/create", element: <CityCreatePage /> },
      // { path: "city/:id", element: <CityPreviewPage /> },
      { path: "city/:id/edit", element: <CityEditPage /> },
      // Route
      { path: "route", element: <RouteListPage /> },
      { path: "route/create", element: <RouteCreatePage /> },
      { path: "route/:id/edit", element: <RouteEditPage /> },

      // User
      { path: "user", element: <UserListPage /> },
      { path: "user/create", element: <UserCreatePage /> },
      { path: "user/:id/edit", element: <UserEditPage /> },
      // Snapshot
      { path: "snapshot", element: <SnapshotListPage /> },
      { path: "snapshot/create", element: <SnapshotCreatePage /> },

      // Carrier
      { path: "carrier", element: <CarrierListPage /> },
      { path: "carrier/create", element: <CarrierCreatePage /> },
      // { path: "carrier/:id", element: <CarrierPreviewPage /> },
      { path: "carrier/:id/edit", element: <CarrierEditPage /> },
      // Station
      { path: "station", element: <StationListPage /> },
      { path: "station/create", element: <StationCreatePage /> },
      { path: "station/:id", element: <StationPreviewPage /> },
      { path: "station/:id/edit", element: <StationEditPage /> },
      // Vehicle
      // { path: "vehicle", element: <VehicleListPage /> },
      // { path: "vehicle/create", element: <VehicleCreatePage /> },
      // { path: "vehicle/:id", element: <VehiclePreviewPage /> },
      // { path: "vehicle/:id/edit", element: <VehicleEditPage /> },
      // Article
      { path: "article", element: <ArticleListPage /> },
      { path: "article/:id", element: <ArticlePreviewPage /> },
      // { path: "media/create", element: <CreateMediaPage /> },
    ],
  },
]);

export const Router = () => {
  return <RouterProvider router={router} />;
};