Cómo implementar el enrutamiento condicional, es decir, si y solo si se cumplen algunas condiciones, entonces debe ocurrir el enrutamiento. Por ejemplo, si y solo si el usuario ingresa las credenciales correctas, el inicio de sesión debería ser exitoso y el usuario debería poder ver la página de bienvenida.
Si accedemos directamente a alguna URL como localhost:8080/welcome , no se debe navegar a la página de bienvenida. La página de bienvenida solo debe mostrarse después de iniciar sesión.
¿Cómo lograr esto, alguien puede ayudarme por favor?
Aplicación.js
import React, { Component } from 'react'; import Header from './Header'; class App extends Component{ render(){ return( <div> <Header /> </div> ); } } export default App;Encabezado.js
import React, { Component } from 'react'; import {Link} from 'react-router-dom'; import Login from './Login'; import SignUp from './SignUp'; class Header extends Component{ render(){ return( <div> <nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><Link to={Login}>Login</Link></li> <li><Link to={Login}>SignUp</Link></li> </ul> </div> </nav> </div> ); } } export default Header;Todas las rutas.js
import React, { Component } from 'react'; import { Switch, Route } from 'react-router-dom'; import Login from './Login'; import SignUp from './SignUp'; import Welcome from './Welcome'; class AllRoutes extends Component{ render(){ return( <Switch> <Route exact path="/login" component={Login} /> <Route exact path="/signup" component={SignUp} /> <Route exact path="/Welcome" component={Welcome} /> </Switch> ); } } export default AllRoutes;Bienvenido.js
import React, { Component } from 'react'; class Welcome extends Component{ render(){ return( <div> <h2>Welcome to MainPage..</h2> </div> ); } } export default Welcome;Para ayudar a responder a su pregunta, creo que es posible que también deba preguntar cómo se debe bloquear esa ruta. 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 state , redux o algún otro medio para determinar si el usuario ha iniciado sesión.
Dado que react-router es simplemente React (¡una de mis partes favoritas!), Tiene todas las herramientas disponibles para mostrar condicionalmente cualquier 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( <Switch> <Route exact path="/login" component={Login} /> <Route exact path="/signup" component={SignUp} /> { this.state.authenticated && <Route exact path="/Welcome" component={Welcome} /> } </Switch> ); } } Una de mis formas favoritas de lograr esto es crear un componente ProtectedRoute
class ProtectedRoute extends Component { render() { const { component: Component, ...props } = this.props return ( <Route {...props} render={props => ( this.state.authenticated ? <Component {...props} /> : <Redirect to='/login' /> )} /> ) } } class AllRoutes extends Component { render() { return ( <Switch> <Route path='/login' component={Login} /> <ProtectedRoute path='/welcome' component={Welcome} /> </Switch> ) } } Si bien no incluí ninguna lógica específica sobre cómo se configuró state.authenticated , esto puede provenir de cualquier parte (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 coloque 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.
Me gusta esto:
class AllRoutes extends Component{ render(){ return( <Switch> <Route exact path="/login" component={Login} /> <Route exact path="/signup" component={SignUp} /> <Route path="/" component={AppWrapper} /> </Switch> ); } } Componente AppWrapper (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 <Redirect to="/login" /> return( <div> App wrapper <Route path='/Welcome' component={Welcome} /> </div> ); } }Me gustaría unirme a la fiesta con una solución simple.
Solo renderizado condicional en el accesorio del componente de la siguiente manera:
<Router> <Navigation /> <Switch> <Route exact path="/" component={ loading ? () => <div>Loading posts...</div> : () => <Home posts={posts} /> } /> <Route path="/login" component={Login} /> </Switch> </Router>Aquí estoy tratando de obtener algunos datos de una API cuando se obtuvo (cargando) debería ser falso y representa el componente Inicio.