web-dev-qa-db-fra.com

Routage conditionnel simple dans Reactjs

Comment faire un routage conditionnel, si et seulement si certaines conditions satisfont, alors seul le routage devrait se produire. Par exemple, si et seulement si l'utilisateur entre les informations d'identification correctes, la connexion doit réussir et l'utilisateur doit pouvoir voir la page d'accueil.

si nous tapons directement sur une URL du type 'localhost: 8080/welcome' qui ne doit pas être parcourue pour accéder à la page de bienvenue, vous ne pourrez la voir qu'après la connexion à la page de bienvenue. comment puis-je atteindre cet objectif, quelqu'un peut-il m'aider s'il vous plait..merci.

App.js

import React, { Component } from 'react';
import Header from './Header';

class App extends Component{
  render(){
   return(
     <div>
       <Header />
     </div>
   );
  }
}
export default App;

Header.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;

AllRoutes.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;

Bienvenue.js

import React, { Component } from 'react'; 

class Welcome extends Component{
render(){
 return(
  <div>
   <h2>Welcome to MainPage..</h2>
  </div>
  );
 }
}
export default Welcome;
reactjsreact-routerreact-reduxreact-router-v4react-router-dom
7
Srikanth Gowda

Pour cela, vous devez diviser l'application entière en deux parties, une partie normalement accessible et protégée. La partie protégée ne sera accessible qu’après une connexion réussie.

Pour obtenir cette fonctionnalité, créez un wrapper de pièce protégée, définissez ses itinéraires avec path='/' et insérez la condition à l'intérieur de celle-ci. Tous les itinéraires protégés doivent être définis à l'intérieur de ce composant d'emballage. Si quelqu'un essaie d'accéder à ces routes sans se connecter, le wrapper les redirigera vers la page de connexion.

Comme ça:

class AllRoutes extends Component{
 render(){
   return(
     <Switch> 
       <Route exact path="/login" component={Login} />
       <Route exact path="/signup" component={SignUp} />
       <Route path="/" component={AppWrapper} />
     </Switch>
   );
  }
 }

AppWrapper Component (en supposant que vous utilisiez un moyen de conserver si l'utilisateur est connecté ou non, mettez donc la vérification appropriée en condition)

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>
   );
  }
}
3
Mayank Shukla

Le meilleur moyen est de créer un HOC. Considérant que vous maintenez l’état d’authentification dans votre magasin Redux. Sinon, vous pouvez vérifier avec votre propre variable.

Créer requireAuth.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function(ComposedComponent) {
  class Authentication extends Component {
    static contextTypes = {
      router: React.PropTypes.object
    }

    componentWillMount() {
      if (!this.props.authenticated) {
        this.context.router.Push('/');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.Push('/');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

Maintenant, dans les itinéraires, vous pouvez utiliser ce hoc et transmettre le composant.

import RequireAuth from './requireAuth';
...

<Route exact path="/Welcome" component={RequireAuth(Welcome)} />
0
Shrey Kejriwal

Vous pouvez faire quelque chose comme:

 let redirectToUrl;
      if ( not logged in ) //check condition
      {
        redirectToUrl = <Redirect to={loginPage}/>;
      }

et utiliser le même:

  <Router>
     <div>
      {redirectToUrl}
       <Switch>
       <Route />
        </switch>
       </div>
</Router>

Pour la même chose, vous devez importer de react-router-dom:

import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Redirect,
  Link,
  Switch
} from "react-router-dom";
0
learner

Vous pouvez utiliser Redirect à partir de react-router-dom.

Voici un bon exemple - https://scotch.io/courses/using-react-router-4/authentication-with-redirect

0
Rishikesh Dhokare