redirecting in react router 6 and reactjs 17

Question

I want to redirect the user after successful login to the home page, But nothing works. This is my Login.js component Also, I could not get parameter URL in class-based components and I was forced to use functional component and I use let params=useParams(); to get URL parameters

function Login(props) {
  const sendSms = async (e=null) => {
          if (typeof(securityCode) !=='undefined' && securityCode.toString().length === 6) {
      const response = await fetch('http://localhost:8000/api/login/' ,{
        method: "post",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          mobile,
          securityCode
        })
      });
        const data = await response.json();
        let result=data.result;
          let message=data.message;
          if (result === 'success') {
          clearInterval(sms_interval);
           setToken(data.data);
           return navigate("/", { replace: true }); //important
            return false;
          } else {
            setAlertClass('alert-danger');
            setAlertMessage(message);
          }

        return false;
    }
         fetch('http://localhost:8000/api/send_sms/' ,{
        method: "post",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          mobile
        })
      })
        .then(response => response.json())
        .then(data => { 
          let result=data.result;
          let message=data.message;
          if (result === 'success') {
          
            let sms_timer = 120;
            setSmsInteral(setInterval(function () {
              if (sms_timer > 0) {
            
            }, 1000)
            );
          } else {
                      }
          
        });

    return false;
  }
 
}

lpizzinidev · Accepted Answer · 2021-12-26 08:50:05Z

2

The useHistory hook is no longer present with React Router 6.

Try to use the useNavigate hook and convert the function to use async / await:

import { useNavigate } from "react-router-dom";

function Login(props) {
  const navigate = useNavigate();

  const verify = async (e = null) => {
    try {
      const response = await fetch("http://localhost:8000/api/login/", {
        method: "post",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          mobile,
          securityCode,
        }),
      });
      const data = await response.json();
      let result = data.result;
      let message = data.message;
      if (result === "success") {
        clearInterval(sms_interval);
        setToken(data.data);
        navigate("/");
      } else {
        sms_alert_element.classList.add("alert-danger");
        sms_alert_element.innerText = message;
      }
      return false;
    } catch (err) {
      console.log(err);
    }
  };
}

answered Dec 26, 2021 at 8:50

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Mahdi Over a year ago

But after redirected my setInterval continues in Login.js

lpizzinidev Over a year ago

Where is sms_interval initialization?

Mahdi Over a year ago

at first I sent a verify code to user by sms, and immediately setInterval starts to count down two minutes.

lpizzinidev Over a year ago

Ok, but where do you call setInterval? Can you post that code?

Mahdi Over a year ago

Eventually I use state to solve this problem . Is it correct?

|

Collectives™ on Stack Overflow

redirecting in react router 6 and reactjs 17

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related