如何将 state 从登录组件发送到反应中的 RequireAuth 组件？ 我正在使用 React 路由器

Question

I am using react router version 6.3.0. I am trying to make protected route using RequireAuth. I am using Email, password login and posting the data using axios and tanstack/react-query. What I am trying to do is send the isLoading and user state from Login comp.net to RequireAuth component.

This is my App.js component `

function App() {
  return (
    <div className="App">
      <Routes>
        <Route
          path="/"
          element={
            <RequireAuth>
              <Dashboard />
            </RequireAuth>
          }
        >
          <Route
            path="products"
            element={
              <RequireAuth>
                <Products />
              </RequireAuth>
            }
          />
          <Route
            path="products/create"
            element={
              <RequireAuth>
                <CreateProduct />
              </RequireAuth>
            }
          />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
      <ToastContainer />
    </div>
  );
}

`

This is my Login component

`

import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useLocation, useNavigate } from "react-router-dom";
import useToken from "../../hooks/useToken";
import Loading from "../shared/Loading";
import RequireAuth from "./RequireAuth";

const Login = () => {
  const [user, setUser] = useState(false);
  const [error, setError] = useState("");
  const navigate = useNavigate();
  let location = useLocation();
  let from = location.state?.from?.pathname || "/";
  const { access_token, refresh_token } = useToken(user);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  let errorElement;


  const userLogin = async (data) => {
    const response = await axios.post(
      "http://www.example.com/auth/login",
      data
    );
    return response.data;
  };

  const { mutate, isLoading, isError } = useMutation(userLogin, {
    onSuccess: (data) => {
      setUser(data);
      console.log("USER:", data);
    },
    onError: (error) => {
      setError(error);
      console.log("ERROR:", error);
    },
  });

  if (isLoading) {
    return <Loading />;
  }

  if (isError) {
    errorElement = (
      <p className=" px-1 pb-2">
        <small className="text-red-500">Invalid user credentials</small>
      </p>
    );
  }

  const onSubmit = async (data) => {
    const user = { ...data };
    mutate(user);
  };

  return (
    // JSX
    // form is react hook form
  );
};

export default Login;

`

RequireAuth component `

import React from "react";
import { Navigate, useLocation } from "react-router-dom";
import Loading from "../Shared/Loading";

function RequireAuth({ children }) {
  let location = useLocation();

// I am trying to use the isLoading state sent from Login component here
   if (isLoading) {
     return <Loading></Loading>;
   }

// I am trying to use the user state sent from Login component here
   if (!user) {
     return <Navigate to="/login" state={{ from: location }} replace />;
   }

  return children;
}

export default RequireAuth;

`

Answer 1

Can define the isLoading in App component level and pass it down to both components

const [isLoading, setIsLoading] = useState(false)
 <Route
      path="/"
      element={
        <RequireAuth isLoading={isLoading}>
          <Dashboard  />
        </RequireAuth>
      }
    >

    <Route path="/login" element={<Login setIsLoading={setIsLoading} />} />

Login

   const Login = ({setIsLoading}) => {

   useEffect(() => { setIsLoading(isLoading)}, [isLoading])

RequireAuth

function RequireAuth({ children,isLoading }) {
   if (isLoading) {
     return <Loading></Loading>;
   }

So the same for user as well