0
votes

Utilisation de la redirection lors de la soumission du formulaire dans React

J'ai tenté de rediriger lors de la connexion de l'utilisateur. La connexion fonctionne correctement avec ma base de données et rendra conditionnellement mes nouveaux liens pour mon portail d'administration. J'essayais d'utiliser Redirection après avoir obtenu un code de statut 200, mais je ne suis pas sûr que ce soit même le bon moyen.

article axios pour le composant de connexion:

const handleSubmit = e => {
    e.preventDefault();
    console.log(adminLogin)

    axios
      .post("/api/Authentication", adminLogin)
      .then(function(response) {
        if (response.status === 200) {
          setIsLoggedIn(true);
          <Redirect to="/inventory" />
        }
        setAdminLogin(response.data);
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

p >

reactjs axios react-hooks

0 commentaires

3 Réponses :

1
votes

Vous ne pouvez pas rediriger directement depuis la fonction. Si vous souhaitez rediriger depuis la fonction, vous pouvez utiliser this.props.history.push('/inventory');

Et une autre façon de rediriger en utilisant state.

const[login,setIsLoggedIn]=useState(false)

if (response.status === 200) {
       setIsLoggedIn(true);
}
if(login){
       return <Redirect to='/inventory'/>
}

return(
       //Main function return
);

0 commentaires

0
votes

si vous utilisez react-router-dom, vous pouvez voir cet exemple dans la documentation et vous pouvez voir une question similaire dans ici

0 commentaires

0
votes

Comme il s'agit d'un appel axios, il est toujours recommandé d'utiliser this.props.history.push ().

Assurez-vous que lorsque vous utilisez cette fonction, vous avez déjà utilisé withRouter pour router votre composant.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios';

class App extends Component {
    ...
    const handleSubmit = e => {
    e.preventDefault();
    console.log(adminLogin)

    axios
      .post("/api/Authentication", adminLogin)
      .then(function(response) {
        if (response.status === 200) {
          setIsLoggedIn(true);
          this.props.history.push('/inventory');
        }
        setAdminLogin(response.data);
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
    }
    ...
}

export default withRouter(App);

Si vous n'emballez pas votre composant avec withRouter, l'objet historique ne sera pas présent dans this.props et, par conséquent, générera une erreur.

0 commentaires