1
votes

Redirection vers routage dans Function React Router Dom

J'ai un bouton avec un événement de clic qui appelle une fonction qui crée une API pour connecter un utilisateur, une fois qu'un utilisateur s'est connecté avec succès. Je souhaite rediriger l'utilisateur vers / overview . Je ne sais pas tout à fait comment le faire avec react-router-dom , tout ce que j'ai vu a été avec react-router et en utilisant un composant basé sur les classes et non un composant basé sur la fonction comme j'utilise.

Voici comment mes itinéraires sont configurés

import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();
<Router history={history}>

Voici mon Composant LoginCard (composant de connexion interne) avec le bouton et la fonction avec l'appel api

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import Button from '../button/Button';
import LoginService from '../../api/LoginService';

const LoginCard = (props) => {

   const loginService = new LoginService();

   const handleLogin = () => {
      loginService.login(email, password)
         .then((response) => {
            // Want to redirect here?
         });
   }

   return (
      <div className="Login">
         <Button onClick={handleLogin}>Login</Button>
      </div>
   );
};

export default LoginCard;

Voici ce que j'ai essayé mais qui n'a pas fonctionné en regardant d'autres threads p >

J'ai aussi vu des gens mentionner props.location ou ceci .props.location les deux ne sont pas définis pour moi.

J'ai essayé d'ajouter

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from "../../login/Login";
import Main from "../../main/Main";

const App = () => {

   return (
      <div className="App">
         <Router>
            <div className="App-container">
               <Route path={"/login"} component={() => <Login />} />
               <Route exact path={"/overview"} component={Main} />
            </div>
         </Router>
      </div>
   );

}

export default App;

dans App.js et l'utilisation history.push Mais il y a eu une erreur disant que ce n'était pas une fonction.

Vous ne savez donc pas vraiment comment faire cela? Je préfère ne résoudre ce problème qu'avec react-router-dom ou via un Function Based Component . Toute aide serait grandement appréciée.

javascript reactjs react-router-dom

0 commentaires

3 Réponses :

2
votes

Étant donné que LoginCard est un composant enfant de Login , il n’aura pas accès au route props automatiquement. Vous pouvez soit changer votre Route comme suit, et transmettre le history prop de Login à LoginCard : XXX

Ou vous pouvez utiliser withRouter HOC pour injecter les accessoires de route dans le composant LoginCard .

const LoginCard = props => {
  const loginService = new LoginService();

  const handleLogin = () => {
    loginService.login(email, password).then(response => {
      props.history.push("/overview");
    });
  };

  return (
    <div className="Login">
      <Button onClick={handleLogin}>Login</Button>
    </div>
  );
};

export default withRouter(LoginCard);

0 commentaires

0
votes

Si vous souhaitez que l'utilisateur se connecte, veuillez également consulter privateRoute qui vous aide à sécuriser votre page

Veuillez consulter ce tutoriel pour plus de détails Réagir auth tutoriel cliquez ici

0 commentaires

1
votes

Vous pouvez le renvoyer sous condition dans votre méthode render comme

 return (
  <div className="Login">
  <Button onClick={handleLogin}>Login</Button>
  </div>
);

et renvoyer votre interface utilisateur de connexion si elle n'est pas authentifiée comme vous l'avez

if(this.state.authenticated){
 return <Redirect to={{ pathname: '/overview' }} />
}

0 commentaires