con fines de aprendizaje, estoy tratando de crear una ruta personalizada, que está protegida, usando React-Router v6. Como muchas personas han intentado antes que yo en los foros o aquí, aparece este error: Error: [ProtectedRoute] no es un componente.
Además, si alguien tiene problemas con una implementación no reutilizable, puede ver mi código de trabajo a continuación: Mi problema es que realmente me gustaría que fuera reutilizable para poder evitar tener este tipo de código desordenado. Avísame si tienes alguna idea.
Personalmente, creo que es un poco imposible debido a la implementación actual de V6. Tal vez nos dejen hacerlo en el futuro. Pero espero que esta publicación ayude de todos modos a las personas que deseen tener rutas protegidas, especialmente al usar la plataforma Parse.
Ruta personalizada:
const ProtectedRoute = ({ component: Component, ...rest }) => { return ( <Route {...rest} render={(props) => { <AuthWrapper> <Component {...rest} {...props} /> </AuthWrapper>; }} /> ); };Wrapper que usa Parse Server para proteger las rutas si el usuario no está conectado actualmente.
const AuthWrapper = ({ children }) => { if (Parse.User.current() !== null) { let isAuthenticated = Parse.User.current().getSessionToken(); let authCondition = isAuthenticated !== undefined; if (authCondition) { return children; } } return <Navigate to={"/login"} />; }; export default AuthWrapper; Solución de trabajo sin ruta personalizada: (ofc sin <ProtectedRoute /> )
<Route path="/book" element={ <AuthWrapper> <BookPage /> </AuthWrapper> } />Lo que me gustaría hacer en su lugar:
<ProtectedRoute path={'/path'} element={<Anything/>} />react-router-dom v6 no admite, y no sospecho que alguna vez lo hará, componentes de ruta personalizados como se usó en versiones anteriores, prefiriendo ahora la composición. Ha creado correctamente un componente AuthWrapper que envuelve parte del contenido, y este es el ejemplo de autenticación v6 de los documentos .
Pero se puede mejorar. En lugar de devolver un único nodo children , puede devolver un Outlet para que se representen los componentes de Route anidados. Esto convierte el componente AuthWrapper de un componente contenedor a un componente de diseño.
import { Navigate, Outlet } from 'react-router-dom'; const AuthLayout = () => { if (Parse.User.current() !== null) { const isAuthenticated = Parse.User.current().getSessionToken(); return isAuthenticated ? <Outlet /> : null; // or loading indicator, etc... } return <Navigate to={"/login"} replace />; }; Esto le permite representar un solo componente AuthLayout en una Route y anidar cualquier número de rutas protegidas en él.
<Route element={<AuthLayout />}> <Route path="/book" element={<BookPage />} /> ... other protected routes ... </Route>Creo que esto lo arreglará. Te perdiste el retorno en el render prop.
const ProtectedRoute = ({ component: Component, ...rest }) => { return ( <Route {...rest} render={(props) => { return (<AuthWrapper> <Component {...rest} {...props} /> </AuthWrapper>); }} /> ); };