Actualmente uso react-router-dom para separar el enrutamiento para personas autenticadas/no autenticadas. Pero Element tiene un error por perder las propiedades.
¿Cómo puede withoutAuth() para las rutas de autenticación?
Al tipo '() => Elemento' le faltan las siguientes propiedades del tipo 'ReactElement<any, string | JSXElementConstructor>': tipo, accesorios, clave
function App() { return ( <BrowserRouter> <AuthProvider> <Routes> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/" element={withoutAuth(<Signup />)} /> </Routes> </AuthProvider> </BrowserRouter> ); } const withoutAuth = (Element: ElementType) => function WithoutAuth() { const { currentFBUser } = useAuthContext() if (currentFBUser) { return <Navigate to="/dashboard" /> } return <Element /> }Por lo general, no pasa los literales JSX a los componentes de orden superior, y la propiedad del element toma un literal JSX en lugar de una referencia a un componente React.
// (1) Create a new decorated component const SignUpWithoutAuth = withoutAuth(Signup); function App() { return ( <BrowserRouter> <AuthProvider> <Routes> <Route path="/dashboard" element={<Dashboard />} /> // (2) Pass the new decorated component as JSX to `element` prop <Route path="/" element={<SignUpWithoutAuth />} /> </Routes> </AuthProvider> </BrowserRouter> ); }Dicho esto, sería más convencional implementarlo como un componente contenedor que como un HOC en RRDv6.
Ejemplo:
function WithoutAuth({ children }) { const { currentFBUser } = useAuthContext() if (currentFBUser) { return <Navigate to="/dashboard" /> } return children; } function App() { return ( <BrowserRouter> <AuthProvider> <Routes> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/" element={( <WithoutAuth> <Signup /> </WithoutAuth> )} /> </Routes> </AuthProvider> </BrowserRouter> ); }Cualquiera de los dos debería funcionar.