Javascript useEffect并不总是与React路由器一起调用

我在React中有“受保护路由”的以下代码：

import React, { useState, useEffect, useContext } from 'react';
import LoadingPageContext from '../../contexts/LoadingPageContext';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
import authorizeWorker from '../../workers/authorize-worker';

/**
 * A protected route that calls the authorize API and redirects to login
 * on fail
 * @param {Element} component The component to redirect to on success
 * @param {String} path The route to redirect to after login
 */
const ProtectedRoute  = ({ component, path  }) => {
    const [isAuthenticated, setIsAuthenticated] = useState(null);
    const { loadingBarRef } = useContext(LoadingPageContext);
    const Component = component;
    console.log('Protected route rendered');

    useEffect(() => {
        console.log('protected route use effect')
        loadingBarRef.current.continuousStart();
        authorizeWorker()
            .then(() => setIsAuthenticated(true))
            .catch(() => setIsAuthenticated(false))
            .finally(() => loadingBarRef.current.complete());
    }, []);

    if (isAuthenticated === true) {
        return <Component />;
    }

    if (isAuthenticated === false) {
        return <Redirect 
                    to={{ pathname:'/login', state: { redirectPath: path }}} 
                />;
    }

    return null;
}

ProtectedRoute.propTypes = {
    component: PropTypes.func.isRequired,
    path: PropTypes.string
};

export default ProtectedRoute;

---

艾米，帮个忙就好了。谢谢

useEffect相当于类组件中的componentDidMount和componentDidUpdate。 当您传递一个空数组-[]时，它将只充当componentDidMount，这意味着只有一次。 如果希望在每次显示新路线时调用效果，则应将其作为道具传递：

useEffect(() => {
        console.log('protected route use effect')
        loadingBarRef.current.continuousStart();
        authorizeWorker()
            .then(() => setIsAuthenticated(true))
            .catch(() => setIsAuthenticated(false))
            .finally(() => loadingBarRef.current.complete());
    }, [path]);

---

这是可行的，但如果我在

/home

并再次点击home，它将不会被调用，因为路径没有改变。但是我需要它来打电话。如果你在家里，你再次点击home，为什么它要检查用户是否经过身份验证？

useEffect(() => {
        console.log('protected route use effect')
        loadingBarRef.current.continuousStart();
        authorizeWorker()
            .then(() => setIsAuthenticated(true))
            .catch(() => setIsAuthenticated(false))
            .finally(() => loadingBarRef.current.complete());
    }, [path]);