src/route/privateRoute.tsx

import { Navigate, Outlet } from 'react-router-dom'
import React from 'react'
import { useSelector } from 'react-redux'

interface PrivateRouteProps {
  role: number
  redirectPath?: string
  children?: React.ReactNode
}

const PrivateRoute = ({
  role,
  redirectPath = '/login',
  children
}: PrivateRouteProps) => {
  const isLogin = useSelector((state: any) => state.user.isLogin)
  const userRole = useSelector((state: any) => state.user.role)

  if (!isLogin) {
    return <Navigate to={redirectPath} replace />
  }

  if (role && role >= userRole) {
    return <Navigate to={redirectPath} replace />
  }

  return children ? (
    <>{children}</>
  ) : (
    <Outlet />
  )

}

export default PrivateRoute