Private routes have been reworked in association with react router docs

src/app/App.tsx

@@ -1,15 +1,15 @@
 import { classNames } from 'shared/lib/classNames/classNames';
-import { AppRouter } from 'app/providers/AppRuoter';
+import { AppRouter } from 'app/providers/AppRouter';
 import { Navbar } from 'widgets/Navbar';
 import { useTheme } from 'app/providers/ThemeProvider';
 import { Sidebar } from 'widgets/Sidebar';
 import React, { Suspense, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { userActions } from 'entities/User';
+import { useDispatch, useSelector } from 'react-redux';
+import { getUserInited, userActions } from 'entities/User';
 
 export const App = () => {
     const { theme } = useTheme();
-
+    const inited = useSelector(getUserInited);
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -27,7 +27,7 @@ export const App = () => {
                 <Navbar />
                 <div className="content-page">
                     <Sidebar />
-                    <AppRouter />
+                    {inited && <AppRouter />}
                 </div>
             </Suspense>
         </div>

src/app/providers/AppRouter/ui/AppRouter.tsx

@@ -0,0 +1,35 @@
+import React, {
+    memo, Suspense, useCallback,
+} from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { AppRoutesProps, routeConfig } from 'shared/config/routeConfig/routeConfig';
+import { Loader } from 'widgets/Loader';
+import { RequireAuth } from 'app/providers/AppRouter/ui/RequireAuth';
+
+const AppRouter = () => {
+    const renderWithWrapper = useCallback((route: AppRoutesProps) => {
+        const element = (
+            <Suspense fallback={<Loader />}>
+                <div className="page-wrapper">
+                    {route.element}
+                </div>
+            </Suspense>
+        );
+
+        return (
+            <Route
+                key={route.path}
+                path={route.path}
+                element={route.authOnly ? <RequireAuth>{element}</RequireAuth> : element}
+            />
+        );
+    }, []);
+
+    return (
+        <Routes>
+            {Object.values(routeConfig).map(renderWithWrapper)}
+        </Routes>
+    );
+};
+
+export default memo(AppRouter);

src/app/providers/AppRouter/ui/RequireAuth.tsx

@@ -0,0 +1,15 @@
+import { useSelector } from 'react-redux';
+import { getUserAuthData } from 'entities/User';
+import { Navigate, useLocation } from 'react-router-dom';
+import { RoutePath } from 'shared/config/routeConfig/routeConfig';
+
+export function RequireAuth({ children }: { children: JSX.Element }) {
+    const auth = useSelector(getUserAuthData);
+    const location = useLocation();
+
+    if (!auth) {
+        return <Navigate to={RoutePath.main} state={{ from: location }} replace />;
+    }
+
+    return children;
+}

src/entities/User/index.ts

@@ -1,3 +1,4 @@
 export { userActions, userReducer } from './model/slice/userSlice';
 export { User, UserSchema } from './model/types/user';
 export { getUserAuthData } from './model/selectors/getUserAuthData/getUserAuthData';
+export { getUserInited } from './model/selectors/getUserInited/getUserInited';

src/entities/User/model/selectors/getUserInited/getUserInited.ts

@@ -0,0 +1,3 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+
+export const getUserInited = (state: StateSchema) => state.user._inited;

src/entities/User/model/slice/userSlice.ts

@@ -2,7 +2,9 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { USER_LOCALSTORAGE_KEY } from 'shared/const/localstorage';
 import { User, UserSchema } from '../types/user';
 
-const initialState: UserSchema = {};
+const initialState: UserSchema = {
+    _inited: false,
+};
 
 export const userSlice = createSlice({
     name: 'user',
@@ -16,6 +18,7 @@ export const userSlice = createSlice({
             if (user) {
                 state.authData = JSON.parse(user);
             }
+            state._inited = true;
         },
         logout: (state) => {
             state.authData = undefined;

src/entities/User/model/types/user.ts

@@ -5,4 +5,5 @@ export interface User {
 
 export interface UserSchema {
     authData?: User;
+    _inited: boolean;
 }

src/shared/config/routeConfig/routeConfig.tsx

@@ -4,7 +4,7 @@ import { AboutPage } from 'pages/AboutPage';
 import { PageNotFound } from 'pages/PageNotFound';
 import { ProfilePage } from 'pages/ProfilePage';
 
-type AppRoutesProps = RouteProps & {
+export type AppRoutesProps = RouteProps & {
     authOnly?: boolean;
 }
 export enum AppRoute {