如何在获取 api 时延迟 React 路由

Question

• 我有多个路线，默认情况下应用程序在

  "/login"

  端点中打开，该端点呈现

  <Loginpage />

• 当我输入用户名和密码时，

  <Loginpage />

  中的代码 使用从本地主机获取的 api 验证凭据，
• 现在，当我看到

  <LoginPage />

  并单击提交时，我看到 立即更改 url，然后查看数据操作按照 活动用户状态。

我想要什么

• 但是，我想在 api 正在运行时渲染

  <Loading/>

  组件 已获取，一旦获取我想重定向到主页端点

  而且，

  <NavbarModule />

  应该在创建账单和主页组件中呈现，但我不希望它在

  <Loginpage />

  中，为此我想出了一个解决方案，将

  <NavbarModule/>

  放置在创建账单和主页路由中，但我觉得它有点重复代码，帮我解决这两个问题

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

  return (
    <section className="slit-app--section">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Navigate replace to="login" />} />
          <Route
            excat
            path="login"
            element={<LoginPage setActiveuser={setActiveuser} />}
          />
          <Route
            path="homepage"
            element={
              <>
                <NavbarModule />
                <BillsModule activeUser={activeUser} />
                <ExtraFeaturesModule activeUser={activeUser} />
              </>
            }
          />
          <Route
            path="createbill"
            element={
              <>
                <NavbarModule />
                <CreateBill />
              </>
            }
          />
        </Routes>
      </BrowserRouter>
    </section>
  );
}

export default App;

function LoginPage({ props, setActiveuser }) {
  const usernameInput = useRef(null);
  const passwordInput = useRef(null);

  function submitClick() {
    // extract the input values
    const usernameValue = usernameInput.current.value;
    const passwordValue = passwordInput.current.value;

    // fetch data
    const apiUrl = "http://127.0.0.1:8889/api/v1/slitapp";
    axios
      .get(apiUrl)
      .then((response) => {
        // slits contain array of 5 objects
        const { slits } = response.data.data;

        // find if the given username input is in slits data
        const foundUser = slits.find((user) => user.username === usernameValue);
        if (foundUser?.password === passwordValue) {
          setActiveuser(foundUser);
        } else {
          setActiveuser([]);
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }

  return (
    <section className="login_page_section ">
      <div className="loginPage">
        <h2 className="login_heading">Login</h2>
        <form>
          <input
            className="Login_slitID_input"
            placeholder="SLitID"
            type="text"
            ref={usernameInput}
          />
          <input
            className="Login_password_input"
            placeholder="Password"
            type="text"
            ref={passwordInput}
          />
          <NavLink
            to="/homepage"
            onClick={submitClick}
            className="login_submit_button"
          >
            submit
          </NavLink>
        </form>
      </div>
    </section>
  );
}

export default LoginPage;

Answer 1

您可以将加载状态保留在

<login/>

组件内，而不是在此处使用 props，

import { Link , useNavigate } from "react-router-dom";
const navigate = useNavigate();

const [isloading, setIsloading] = useState(false);
 function submitClick() {
// extract the input values

setIsloading(true);
const usernameValue = usernameInput.current.value;
const passwordValue = passwordInput.current.value;

// fetch data
const apiUrl = "http://127.0.0.1:8889/api/v1/slitapp";
axios
  .get(apiUrl)
  .then((response) => {
    // slits contain array of 5 objects
    const { slits } = response.data.data;

    // find if the given username input is in slits data
    const foundUser = slits.find((user) => user.username === 
    usernameValue);
    if (foundUser?.password === passwordValue) {
      setActiveuser(foundUser);

     setIsloading(false);
    navigate ('/homepage');
    } else {
      setActiveuser([]);
    }
  })
  .catch((error) => {
    console.error("Error:", error);
  });

}