如何在 React 路由跳转前等待 API 请求完成并统一管理导航栏-js教程-PHP中文网

如何在 React 路由跳转前等待 API 请求完成并统一管理导航栏

本文教你如何在用户提交登录表单后，阻断立即跳转、显示加载状态，并在 API 成功响应后再重定向；同时通过布局路由（Layout Route）模式避免在多个路由中重复声明。

本文教你如何在用户提交登录表单后，阻断立即跳转、显示加载状态，并在 api 成功响应后再重定向；同时通过布局路由（layout route）模式避免 `` 在多个路由中重复声明。

在 React Router v6+ 中，实现「API 请求完成后再跳转」的核心在于：不依赖的 to 属性触发导航，而改用 useNavigate 手动控制跳转时机；同时，将加载状态（isloading）保留在组件内部，配合条件渲染展示组件，确保 UX 流程可控、无闪烁。

✅ 正确做法：手动导航 + 内部加载态

首先，在中引入 useNavigate 并移除的自动跳转行为：

import { useState, useRef, useNavigate } from 'react';
import axios from 'axios';

function LoginPage({ setActiveuser }) {
  const [isloading, setIsloading] = useState(false);
  const usernameInput = useRef(null);
  const passwordInput = useRef(null);
  const navigate = useNavigate(); // ✅ 获取导航函数

  const submitClick = async (e) => {
    e.preventDefault(); // 阻止表单默认提交（避免页面刷新）
    setIsloading(true);

    const usernameValue = usernameInput.current?.value || '';
    const passwordValue = passwordInput.current?.value || '';

    try {
      const response = await axios.get('http://127.0.0.1:8889/api/v1/slitapp');
      const { slits } = response.data.data;
      const foundUser = slits.find(user => user.username === usernameValue);

      if (foundUser?.password === passwordValue) {
        setActiveuser(foundUser);
        navigate('/homepage'); // ✅ 成功后跳转
      } else {
        setActiveuser([]);
        alert('用户名或密码错误');
      }
    } catch (error) {
      console.error('登录请求失败:', error);
      alert('网络错误，请重试');
    } finally {
      setIsloading(false); // ✅ 无论成功失败都关闭加载态
    }
  };

  return (
    <section classname="login_page_section"><div classname="loginPage">
        <h2 classname="login_heading">登录</h2>
        <form onsubmit="{submitClick}"> {/* ✅ 使用 form + onSubmit */}
          <input classname="Login_slitID_input" placeholder="SLitID" type="text" ref="{usernameInput}" required><input classname="Login_password_input" placeholder="密码" type="password" password ref="{passwordInput}" required><button type="submit" classname="login_submit_button" disabled>
            {isloading ? '登录中...' : '提交'}
          </button>
        </form>

        {/* ✅ 条件渲染 Loading 组件 */}
        {isloading && <loading></loading>}
      </div>
    </section>
  );
}

export default LoginPage;

⚠️ 注意事项：

永远不要用触发异步逻辑：onClick 会先触发跳转（即使 preventDefault() 也难完全拦截），导致路由提前切换、组件卸载、状态丢失。

使用
+ e.preventDefault() 是更语义化、更可靠的控制方式。

setIsloading(false) 必须放在 finally 块中，防止 Promise 拒绝时加载态卡死。

密码输入框应设 type="password"，提升安全性与用户体验。

? 优化结构：使用 Layout Route 统一包裹导航栏

为避免在 /homepage 和 /createbill 中重复书写，推荐采用 布局路由（Layout Route） 模式——即定义一个带 Navbar 的公共布局组件，并将其作为父级路由容器：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

// layouts/WithNavbarLayout.jsx
import { Outlet } from 'react-router-dom';

export default function WithNavbarLayout() {
  return (
    
      <navbarmodule></navbarmodule><main classname="content"><outlet></outlet> {/* ✅ 子路由内容将在此处渲染 */}
      </main>>
  );
}

更新 App.js 路由配置如下：

function App() {
  const [activeUser, setActiveuser] = useState([]);

  return (
    <section classname="slit-app--section"><browserrouter><routes><route path="/" element="{<Navigate" replace to="login"></route>} />

          {/* 独立登录页 —— 不含 Navbar */}
          <route path="login" element="{<LoginPage" setactiveuser="{setActiveuser}"></route>} />

          {/* 带 Navbar 的布局路由 */}
          <route element="{<WithNavbarLayout"></route>}>
            <route path="homepage" element="{<BillsModule" activeuser="{activeUser}"></route>} 
            />
            <route path="createbill" element="{<CreateBill"></route>} 
            />
          
        </routes></browserrouter></section>
  );
}

export default App;

✅ 这样做的优势：