0
175
ViewsReact Router6: problema al pasar el elemento a la ruta privada
Estoy tratando de crear un componente PrivateRoute como:
import { useStoreState } from 'easy-peasy'; import React, { Component } from 'react'; import { Navigate, Route } from 'react-router-dom'; // import styles from'./index.module.scss'; interface PrivateRouteProps { path: string; element: Component; } const PrivateRoute: React.FC<PrivateRouteProps> = ({ path, element, children, ...props }) => { const isLoggedIn = useStoreState((state: any) => state.user.isLoggedIn); if (!isLoggedIn) { return <Navigate to="/login" />; } return ( <Route path={path} element={element} {...props}> {children} </Route> ); }; export default PrivateRoute;y así es como estoy tratando de usarlo:
function App() { return ( <div className={styles.app}> <Router> <Routes> <Route path="" element={<Home />}></Route> <Route path="login" element={<Login />}></Route> <PrivateRoute path="cohort" element={MyComponent}></PrivateRoute> </Routes> </Router> </div> ); } pero mientras uso PrivateRoute recibo este error: 
1 answers
Answer question0
Mi intento anterior del element: React.ComponentType<any> resolvió el error mecanografiado pero luego el nuevo error fue
Error: [PrivateRoute] no es un componente. Todos los elementos secundarios de deben ser <Route> o <React.Fragment>
Por lo tanto, con el enrutador de reacción v6, solo los componentes de ruta pueden ser hijos de rutas. consulte los documentos v6 y verá que el patrón de autenticación es usar un componente contenedor para manejar la verificación de autenticación y la redirección.
El antiguo patrón v5 ya no funcionará.
Así es como debería verse su PrivateRoute . He comentado el código anterior para que puedas ver los cambios que he hecho.
import { useStoreState } from "easy-peasy"; import React, { Component } from "react"; import { Navigate, Route } from "react-router-dom"; // import styles from'./index.module.scss'; interface PrivateRouteProps { path: string; element: React.ComponentType<any>; // element: Component; } // const PrivateRoute: React.FC<PrivateRouteProps> = ({ // path, // element, // children, // ...props // }) => { const PrivateRoute = ({ children }: { children: JSX.Element }) => { const isLoggedIn = useStoreState((state: any) => state.user.isLoggedIn); if (!isLoggedIn) { return <Navigate to="/login" />; } // return ( // <Route path={path} element={element} {...props}> // {children} // </Route> // ); return children; }; export default PrivateRoute; Y, su componente de App se verá así
export function App() { return ( <div> <Router> <Routes> <Route path="" element={<Home />}></Route> <Route path="login" element={<Login />}></Route> {/* <PrivateRoute path="cohort" element={MyComponent}></PrivateRoute> */} <Route path="cohort" element={ <PrivateRoute> <MyComponent /> </PrivateRoute> } /> </Routes> </Router> </div> ); }Y aquí el enlace a codesandbox https://codesandbox.io/s/reactrouterv6wayofdoingthings-0nmkg?file=/src/App.tsx