flashcards-example-project/src/router.tsx

import {
    Navigate,
    Outlet,
    RouteObject,
    RouterProvider,
    createBrowserRouter,
} from 'react-router-dom'

import { DecksPage, SignInPage } from './pages'
import { DeckPage } from '@/pages/deck-page/deck-page'

const publicRoutes: RouteObject[] = [
    {
        children: [
            {
                element: <SignInPage />,
                path: '/login',
            },
        ],
        element: <Outlet />,
    },
]

const privateRoutes: RouteObject[] = [
    {
        element: <DecksPage />,
        path: '/',
    },
    {
        element: <DeckPage />,
        path: '/decks/:deckId',
    },
]

const router = createBrowserRouter([
    {
        children: privateRoutes,
        element: <PrivateRoutes />,
    },
    ...publicRoutes,
])

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

function PrivateRoutes() {
    const isAuthenticated = true

    return isAuthenticated ? <Outlet /> : <Navigate to={'/login'} />
}