Realmente no sé qué es ProtectRouteProps y qué debo poner en él.

No hay accesorios. Esto es claro por el uso:

 <Route path='/createItem' element={<ProtectRoute />} />

No se pasan accesorios a ProtectRoute . Puedes soltar el objeto props:

 import { Navigate, Outlet } from "react-router"; import { RootStateOrAny, useSelector } from "react-redux"; export default function ProtectRoute() { const userSignin = useSelector((state: RootStateOrAny) => state.userSignin); const { userInfo } = userSignin; return userInfo?.user?.isAdmin ? <Outlet /> : <Navigate to='/' replace />; }

El problema ahora es que no se puede acceder a CreateItem porque va a la página ProtectRoute que está vacía. ¿Qué tengo que hacer?

Las rutas de "autenticación" son las llamadas rutas de diseño . Aplican algo de lógica, tal vez algún CSS de diseño con estilo, y representan un Outlet para que se representen los componentes de Route anidados. Los componentes de Route anidados utilizan la propiedad de path para la coincidencia de ruta.

Ejemplo:

 <Route element={<ProtectRoute />}> <Route path='/createItem' element={<CreateItem />} /> ... other protected routes ... </Route>

 <Route exact path='/Login' element={<Login name="Login Page"></Login>}></Route> <Route element={<Protected/>}> <Route exact path='/' element={<Home/> }></Route> <Route exact path='/Content' element={<Content />}></Route> </Route> <Route path='*' element={<Login/>} ></Route> </Routes>

Crear Protected.js

 import { Navigate, Outlet } from 'react-router-dom'; const useAuth = ()=>{ if(localStorage.getItem("isLogged")){ const user = {loggedIN :true}; return user && user.loggedIN }else{ const user = {loggedIN :false}; return user && user.loggedIN } } const Protected = () => { const isAuth = useAuth(); return isAuth ? <Outlet/>:<Navigate to={"/login"}/> } export default Protected