He creado un HOC "ProtectedRoute" para restringir rutas para usuarios no autenticados. He usado "react-router-dom" para el enrutamiento en la aplicación.
Puedo enrutar a los usuarios en función de su token, pero recibo una advertencia en la consola y no puedo acceder a los accesorios del enrutador como "historial", "ubicación", "coincidencia" en el componente representado. A continuación se muestra la implementación del componente ProtectedRoute.
const ProtectedRoute = ({component:Component, ...rest}) => { const [isLoggedIn, setLoggedIn] = useState({loggedIn:false, loaded:false}) useEffect(async () => { const userStatus = await validateUserLoggedIn(); # returns true if user is authenticated setLoggedIn((prevState) => {return {loggedIn:userStatus, loaded:true}}) }, []) return( <Route {...rest} render={(routerProps) => { return isLoggedIn.loaded ? isLoggedIn.loggedIn ? <Component {...routerProps} {...rest} /> : <Redirect to={{pathname:'/login'}} : <h1>Loading Page</h1> }} /> ) }ProtectedRoute en el componente de enrutamiento principal:
<Switch> <ProtectedRoute exact path="/admin" component={Admin} /> </Switch>Mensaje de error "Las funciones no son válidas como elemento secundario de React. Esto puede suceder si devuelve un Componente en lugar de renderizar. O tal vez pretendía llamar a esta función en lugar de devolverla".
Cualquier sugerencia es apreciada.
Ok, entonces hay algunas cosas mal.
No debe devolver algo dentro de un componente, lo está haciendo dentro de su componente <Route /> . Esto está provocando la advertencia: las Functions are not valid as a React child. This may happen if you return a Component instead of from render .
A su componente <Redirect /> le faltaba /> al final, dejarlo abierto provocará un error.
Estas correcciones también deberían resolver su problema en el que no podía acceder a los accesorios de ruta.
<Route {...rest} render={(routerProps) => { isLoggedIn.loaded ? ( isLoggedIn.loggedIn ? ( <Component {...routerProps} {...rest} /> ) : ( <Redirect to={{ pathname: '/login' }} /> ) ) : ( <h1>Loading Page</h1> ); }} />;