Function 没有在 React 应用程序中作为道具传递以及如何防止相同的 function 进入无限循环

Question

I am setting up private routing in my react app so that only authenticated user can visit home and profile page And if the user is not authenticated, then he can only visit the login and signup page.

What I am doing for this is that I am calling the login function which I have created in the privateRoute.js file while the login function is in the Login.js file

Now as I know that I can pass the login function from the Login.js file to the privateRoute.js file as a prop. Now as soon as when I do this and run the functionality, my login function goes into an infinite loop because one condition of my login function becomes true in Login.js file and it goes running and running.

So how do I prevent that condition from being true in the Login.js file and then use the login function in the privateRoute.js file?

my code is below.

Login.js

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { Link } from "react-router-dom";
import RequireAuth from "./PrivateRoute";

const Login = () => {
  const initialValues = {
    email: "",
    password: "",
  };

  const [userData, setUserData] = useState(initialValues);
  const AuthenticateUser = () => {
    const localInfo = JSON.parse(localStorage.getItem("signUpUser"));
    if (localInfo === null) {
      alert("No user exist");
      return false;
    } else {
      localInfo?.map((item) => {
        const userName = item.email;
        const userPassword = item.password;
        if (userName === userData.email && userPassword === userData.password) {
          alert("Login Successfully.");
        } else {
          alert("Login Failed.");
          return false;
        }
      });
      setUserData(initialValues);
    }
  };

  return (
    <>
      <Form className="loginForm">
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Email Address</Form.Label>
          <Form.Control
            type="email"
            placeholder="Enter email"
            value={userData.email}
            name="email"
            onChange={(e) =>
              setUserData({ ...userData, [e.target.name]: e.target.value })
            }
          />
        </Form.Group>
        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            placeholder="Password"
            name="password"
            value={userData.password}
            onChange={(e) =>
              setUserData({ ...userData, [e.target.name]: e.target.value })
            }
          />
        </Form.Group>
        <Form.Group className="mb-3" controlId="formBasicCheckbox"></Form.Group>

        <Button
          variant="primary"
          type="submit"
          onClick={() => AuthenticateUser()}
        >
          Login
        </Button>

        <div className="txtToSignUpBtn">
          <span>OR</span> <Link to="/signUp">Click here to Register</Link>
        </div>
      </Form>
      <RequireAuth AuthenticateUser={AuthenticateUser} />
    </>
  );
};
export default Login;

PrivateRoute.js

import React from 'react'
import { Navigate } from 'react-router-dom';

const RequireAuth = ({ AuthenticateUser }) => {
        let auth = AuthenticateUser;
        
        if (!auth) {
            return <Navigate to="/" />,
          }
    
    }
export default RequireAuth;

App.js

import React from "react";
import Login from "./Login";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./Header";
import RequireAuth from "./PrivateRoute";

const App = () => {
  return (
    <>
      <Router>
        <Routes>
          <Route
            exact
            path="/home"
            element={
              <RequireAuth>
                <Header />
              </RequireAuth>
            }
          />
          <Route exact path="/" element={<Login />} />
        </Routes>
      </Router>
    </>
  );
};

export default App;

Answer 1

you are rendering the RequireAuth component in your login file, so every time the page loads, it is testing for the authentication and rerouting you to the login page. remove the RequiredAuth component from the login page. If you want to access the authenticate user function, I would just put it in a separate file and export it from there to both. That being said, I would also recommend using something like recoil or redux to externalize the state values for the login. you could use something like a custom hook that stores the login information and then in the app.js file you can just render the homepage if the login is correct, if not render the login page.