将 Function 作为道具传递时，React.js -“不是函数”或“渲染未返回任何内容”错误

Question

I am new to React and building a CRUD operation react-app for practice. I have 2 files(one is Login.js and another is RequireAuth.js) which are inside same folder/directory(components). I have function of user authenticate in Login.js file which I'm calling/running on onClick of login button.

And in my second file(RequireAuth.js) I am setting private routing that only authenticated user is allowed to go on the paths like /home, /profile etc. and If the user is not authenticated, then he/she can only go to /login and /signup.

Now I want to call/access the function of user authenticate(which I'm calling/running on onClick of login button in the Login.js file) in this private routing(RequireAuth) file. I tried to pass the function of user authenticate(from Login.js) as a prop in RequireAuth.js file but I am not getting the desired result.

Basically I am getting 2 errors right now and both my errors are coming in the RequireAuth.js file itself. I am going to tell the errors in details like this that I am getting from my existing code.

A) When I set AuthenticateUser to AuthenticateUser() in RequireAuth function(as I have shown below) in RequireAuth.js so I get an error that Uncaught TypeError: AuthenticateUser is not a function .

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

const RequireAuth = ({ AuthenticateUser }) => {
  AuthenticateUser = true;
  let auth = AuthenticateUser();
  return !auth ? <Navigate to="/" /> : /*<Navigate to="/home" />, <Navigate to="/profile" /> etc. etc.*/;
};
export default RequireAuth;

B) and When I don't make any changes to RequireAuth.js file(as i have shown below again) and leave it as it is, I get the error Uncaught TypeError: RequireAuth(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null .

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

const RequireAuth = ({ AuthenticateUser }) => {
  AuthenticateUser = true;
  let auth = AuthenticateUser;
  return !auth ? <Navigate to="/" /> : /*<Navigate to="/home" />, <Navigate to="/profile" /> etc. etc.*/;
};
export default RequireAuth;

Here I don't know what I'm doing wrong or missing in my code. All files of my code are as below:

Login.js

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

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>
      </Form>
      {false ? <RequireAuth AuthenticateUser={AuthenticateUser} /> : ""}
    </>
  );
};
export default Login;

RequireAuth.js

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

const RequireAuth = ({ AuthenticateUser }) => {
  AuthenticateUser = true;
  let auth = AuthenticateUser;
  return !auth ? <Navigate to="/" /> : /*<Navigate to="/home" />, <Navigate to="/profile" /> etc. etc.*/;
};
export default RequireAuth;

App.js

import React from "react";
import "./App.css";
import Profile from "./Profile";
import Login from "./Login";
import SignUp from "./SignUp";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import RequireAuth from "./RequireAuth";

const App = () => {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path="/" element={<Login />} />
          <Route exact path="/signUp" element={<SignUp />} />
          <Route
            exact
            path="/home"
            element={
              <RequireAuth>
                <Home />
              </RequireAuth>
            }
          />
          <Route exact path="/profile" element={<Profile />} />
        </Routes>
      </Router>
    </>
  );
};

export default App;

Please help me. I thank you all in advance.

Answer 1

You're reassigning the AuthenticateUser prop, which was passed as a function, to a boolean when the component mounts (when your component function is called by React).

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

const RequireAuth = ({ AuthenticateUser }) => {
  AuthenticateUser = true; // <-- this overwrites your prop to hold a boolean value of true
  let auth = AuthenticateUser(); // <-- this is trying to call a boolean value rather than a function
  return !auth ? <Navigate to="/" /> : /*<Navigate to="/home" />, <Navigate to="/profile" /> etc. etc.*/;
};
export default RequireAuth;

In the second case, same problem, although this time let auth = AuthenticateUser is the same as saying let auth = true . Since auth will always be true, !auth will always be false, and return your commented component (which is where I'm assuming the "nothing was returned" error is coming from).