2

estoy tratando de implementar la proteccion de mis rutas pero está , me falla a la hora de la redirección:

¿Quisiera saber que es lo que está fallando ya que no me redirigé a ninguna ruta, tampoco me marca donde ocurre el error? Tengo dudas acerca del funcionamiento del render en el Route.

function AppRoutes():JSX.Element{
    return (
   <Router>
        <Switch>
       
        <Route  path="/personal" render={(...props)=> <OnlyLogOut {...props} Component={OnlylogOutRoutes} /> } />
        <Route  path="/dashboard"  render={(...props)=> <PrivatesRoutes {...props} Component={RoutesPrivates}/> } />
        </Switch>
             

   </Router>
    )
}

Componente OnlyLogout:

export function OnlyLogOut({ Component} :{Component:any}, {...rest}) {
    let [role, setrole]:any = useState('');
    console.log('role es :', role);
    useEffect(() => {
       setrole(getRoleUser())
       }, []);
    return (
      <Route 
        {...rest}
          render={props =>
            role === false ? (
              <Component {...props} />
            ) : (
              <Redirect
                to={{
                  pathname: "/",
                  state: { from: props.location }
                }}
              />
            )
          }
      />
    )
        }

Rutas para Onlylogout:

function OnlylogOutRoutes():JSX.Element{
    return (
        <Switch>
         <Route exact path="/personal_login" component={LoginScreen}/>
         <Route exact path="/personal_register" component={RegisterScreen}/>
        </Switch>   
    )
}

Private Routes:

export const PrivatesRoutes = ({Component}:{Component:any}, {...rest}): JSX.Element => {
    let [role, setrole]:any = useState('');
    console.log('role es :' ,role);
    useEffect(() => {
       setrole(getRoleUser())
       }, []);

    return (
      <Route
        {...rest}
          render={props =>
            role === "admin" ? (
              <Component {...props} />
            ) : (
              <Redirect
                to={{
                  pathname: "/login",
                  state: { from: props.location }
                }}
              />
            )
          }
      />
    )
        }
export const PrivatesRoutes = ({Component}:{Component:any}, {...rest}): JSX.Element => {
    let [role, setrole]:any = useState('');
    console.log('role es :' ,role);
    useEffect(() => {
       setrole(getRoleUser())
       }, []);

    return (
      <Route
        {...rest}
          render={props =>
            role === "admin" ? (
              <Component {...props} />
            ) : (
              <Redirect
                to={{
                  pathname: "/login",
    
                }}
              />
            )
          }
      />
    )
        }

Tambien tenia otra duda: ¿Es necesario colocar el render en el componente route y que funcion cumple el render? Porque vi algunos ejemplos donde podria colocar directamente de esta forma:

     <Switch>
          <PublicRoutes path="/auth" component={ AuthRouter } isAuthenticated={islogged/>
</Switch>

1 respuesta 1

0

Hola amigo buen día te voy a mostrar un ejemplo de como debes redireccionar las rutas:

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

// Importing the Context Provider & Home Component
import Home from './components/Home';

import Ubicacion from './components/pagina/Ubicacion';


function App(props) {
  return (
   <MyContextProvider>
      <Router>
      <Home/>

       <Switch>
           <Route path={'/Ubicacion'} component = {Ubicacion}></Route>
          
           <Route component={Ubicacion}/>
         </Switch>


      </Router>
    </MyContextProvider>
    
  );
}

export default App;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.