Enrutamiento condicional simple en Reactjs

Luego de observar en varios repositorios y sitios al concluir hemos descubierto la solución que te compartiremos a continuación.

Solución:

Para ayudar a responder a su pregunta, creo que es posible que también deba preguntar cómo esa ruta debe quedar bloqueada. Mirando el ejemplo anterior, aún no tiene un mecanismo que ayude a responder la pregunta “¿debería poder visitar esta página?”. Eso podría provenir de stateredux o algún otro medio para determinar si el usuario ha iniciado sesión.

Ya que react-router es simplemente React (¡una de mis partes favoritas!) Tienes todas las herramientas disponibles para ti que mostrarías condicionalmente ningún parte de su aplicación React.

Aquí hay un par de ejemplos de cómo puede lograr esto (de ninguna manera es exhaustivo. ¡Sea creativo! Todo depende de sus requisitos y las herramientas que esté utilizando)

class AllRoutes extends Component
  render()
    return(
       
        
        
         this.state.authenticated && 
          
        
      
    );
  

Una de mis formas favoritas de lograr esto es creando un ProtectedRoute componente

class ProtectedRoute extends Component 
  render() 
    const  component: Component, ...props  = this.props

    return (
       (
          this.state.authenticated ?
             :
            
        ) 
      />
    )
  


class AllRoutes extends Component 
  render() 
    return (
      
        
        
      
    )
  

Si bien no incluí ninguna lógica específica sobre cómo state.authenticated se configuró, esto puede provenir de cualquier lugar (de ninguna manera necesita provenir de state). Haga todo lo posible para responder a la pregunta “¿cómo determino si un usuario está autenticado?” y use ese mecanismo como medio para manejar la autenticación de ruta.

Para eso, debe dividir toda la aplicación en dos partes, normalmente accesible y protegida. La parte protegida será accesible solo después de un inicio de sesión exitoso.

Para lograr esa funcionalidad, cree un contenedor de parte protegida y defina sus rutas con path='/', y pon la condición dentro de eso. Todas las rutas protegidas deben definirse dentro de ese componente contenedor. Si alguien intenta acceder a esas rutas sin iniciar sesión, el contenedor lo redirigirá a la página de inicio de sesión.

Como esto:

class AllRoutes extends Component
 render()
   return(
      
       
       
       
     
   );
  
 

AppWrapper Componente (asumiendo que está utilizando alguna forma de mantener si el usuario ha iniciado sesión o no, así que marque la condición adecuada):

import  Redirect  from 'react-router-dom'

class AppWrapper extends Component
  render()

  if(/*not login*/)
    return 

   return(
     

       App wrapper
       
     
   );
  

Me gustaría unirme a la fiesta con una solución simple.

Solo renderizado condicional en el accesorio del componente de la siguiente manera:

  
  
       
Loading posts...
         : () => 
        
      />
    
  

Aquí estoy tratando de obtener algunos datos de una API cuando se obtuvo (carga) debería ser false y renderiza el componente Home.

Recuerda que puedes recomendar esta sección si lograste el éxito.

---

---

Utiliza Nuestro Buscador