如何使用 Javascript 重定向登录页面

Question

const RequireAuth = ({ children }) => {
    const [user, loading, error] = useAuthState(auth);

    const location = useLocation();
    if (loading) {
        return <Loading></Loading>
    }
    if (!user) {
        return <Navigate to="/login" state={{ from: location }} replace />;
    }
    return children;
};

export default RequireAuth;

Answer 1

You can also do something like this:

if (!user) {
   window.location.href = `http://localhost:3000/login?from=${location}` // for example
}

and then parse query string to get a value of location

---

UPDATE:

Doing "routing" as I mentioned above is wrong and it will lead to hard to debug bugs. Use useNavigate hook from react-router-dom instead: https://reactrouter.com/docs/en/v6/hooks/use-navigate

Answer 2

const [user, loading] = use Auth State(auth)
const location = use Location()

if (loading) {
    return <Loading></Loading>
}
if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace ></Navigate>
}
return children

};

export default Private Route;

(sorry for space)