0

Es válida la siguiente ejecución condicional?

<Route path="/" render={() => isReg ?   ( cliente ?  <HomeCliente /> : <HomeProveedor /> ) : <Inicio /> } />

La misma está implementada de la siguiente manera, donde isReg y cliente son hooks que toman valores booleanos.

const App: React.FC = () => {
  const [isReg, setIsReg] = useState(false);
  const [cliente, setCliente] = useState(true);

  useEffect(() => {
    if(renderAgain){
      console.log("render again igual a true")
    }
    getItem("isRegistered").then(res => {
      if (res!=null){
        setIsReg(true);
        getItem("clientType").then(res => {
          console.log("tipo de cliente: "+res)
          if (res=="1"){
            console.log("entonces es igual a 1 el tipo de cliente")
            setCliente(true)
          }else{
            console.log("entonces es igual a 2 o 3 el tipo de cliente")
            setCliente(false)
          }
          
        })

      }
      else{
        setIsReg(false);
      }
    });
}, []);

return(
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main" when="(min-width: 4096px)">
      <Menu renderAgain={renderAgain} />
  <IonRouterOutlet id="main">

    <Route path="/" render={() => isReg ?   ( cliente ?  <HomeCliente /> : <HomeProveedor /> ) : <Inicio /> } />

  </IonRouterOutlet>
  </IonSplitPane>
</IonReactRouter>
</IonApp>

);
};

export default App;
2
  • ¿Te funcionó? Saludos
    – g.4
    Commented el 3 abr. 2021 a las 17:00
  • Claro que es válida, ¿tienes algún problema con tu código?
    – Devandmus
    Commented el 3 abr. 2021 a las 18:51

1 respuesta 1

0

Sí, es valida, pero es mejor tener lógica fuera del router. Por ejemplo, tener un component Home que va hacer todo el trabajo:

<Route path="/" render={Home} />

Y en Home puede hacer la lógica requisa y cambiar entre Inicio y páginas de cliente.

También es una buena idea encapsular la lógica para autenticación y rol en un React Context Provider y crear un hook que se puede usar en Home. React Context es un poco difícil y no es absolutamente necesario pero ayuda a separar lógica para que no tengas todo en su App.js.

También puedes crear un hook, por ejemplo useAppRole() y usarlo en Home para saber el rol:

const { role } = useAppRole()

Es una buena idea usar Context porque otras páginas va a necesitar la información y mejor buscarla solamente una vez.

Puede ser que la lógica es la misma que tiene pero la arquitectura es mejor así. Si no separas la lógica, puede ser que todo el código va estar en App.js. Puede ver un ejemplo en Code Sandbox aquí: https://codesandbox.io/s/so-architecture-w-context-provider-txb06?file=/src/Home.js

En el ejemplo también tengo loading para indicar que estamos buscando el app rol.

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.