写的 link 和条件是正确的但是页面不动

Question

我希望我的登录页面在我从服务器获得号码 200 时转到联系人确认页面，但它不起作用。我的错误在哪里？

 const [form, setForm] = useState({});

 async function checkLogin() {
     try {
         const response = await axios({
             url: 'https://api.bms-go2tr.com/api/v1/check',
             method: 'POST',
             data: form
         });

         if (response.status == 200) {
             return <Link to="/Verification"/>
         }
     } catch (error) {
         if (error.status == 493) {
             return <Link to="/Verification" />
         } else {
             alert(error.response.data.message)
         }
     }

Answer 1

<Link> 组件用于在您的应用程序中创建 link，但它不会导航到那个 link。对于导航，您可以使用 useNavigate() 钩子或 <Navigate> 组件（如果您使用 react router v6）。

解法： 而不是 <Link to="/Verification" /> 使用 <Navigate to="/Verification" />.

Answer 2

你不能 return 在回调中这样的 JSX 并期望它被呈现到 DOM 中。在这样的回调处理程序中，您想要发出 强制性 导航操作（ 即使用 navigate 函数），与 声明式 动作（ 即呈现 Link 或 Navigate组件).

使用 useNavigate 挂钩访问 navigate 函数并将 Link 替换为对 navigate.

的调用

示例：

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

...

const navigate = useNavigate();
const [form, setForm] = useState({});

async function checkLogin() {
  try {
    const response = await axios({
      url: 'https://api.bms-go2tr.com/api/v1/check',
      method: 'POST',
      data: form
    });

    if (response.status == 200) {
      navigate("/Verification");
    }
  } catch (error) {
    if (error.status == 493) {
      navigate("/Verification");
    } else {
      alert(error.response.data.message);
    }
  }
}

写的 link 和条件是正确的但是页面不动

The written link and condition is correct but the page does not move

javascript

reactjs

react-router