在 React 路由器 6 和 ReactJS 17 中重定向

Question

我想在成功登录主页后重定向用户，但是没有任何效果。这是我的 Login.js 组件另外，我无法在基于 class 的组件中获取参数 URL，我被迫使用功能组件，我使用 let params=useParams(); 获取 URL 参数

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;
  }
 
}

Answer 1

React Router 6 中不再存在 useHistory 钩子。

尝试使用 useNavigate 钩子并将函数转换为使用 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);
    }
  };
}

在 React 路由器 6 和 ReactJS 17 中重定向

redirecting in react router 6 and reactjs 17

redirect

router

reactjs