每次出口改变时如何执行useEffect

Question

这是我的反应代码：

function ProtectedRoutes(props) {

    useEffect(() => {

        setTimeout(props.verify_access, 100)

    }, [])

    const { isAuth } = props
    
    if(isAuth){

        return <Outlet />
    }else{

        return <Navigate to={"/login"}/>
    }

}


const mapStateToProps  = state => {

    return {
        isAuth: state.auth.isAuthenticated
    }
}

export default connect(mapStateToProps, { verify_access })(ProtectedRoutes)

所以这里发生的事情是我试图为经过身份验证的用户创建一个受保护的路由。我正在使用存储在 localStorage 中的 JWT 对用户进行身份验证，我需要 redux 操作 props.verify_access 来在用户每次访问不同页面时检查 JWT。正如您现在可能看到的那样，这不会发生，因为显然 useEffect 挂钩只会在父路由首次初始化时运行，如果我转到父路由内的任何路由 useEffect 不会做任何事情。我试图在 useEffect 数组中放入 Outlet 但它不起作用

如何在每次用户加载新的受保护路由时执行 useEffect？

Answer 1

使用 useLocation 挂钩访问 location 对象并使用 pathname 作为 useEffect 挂钩的依赖项。

示例：

import { Navigate, Outlet, useLocation } from 'react-router-dom';

function ProtectedRoutes({ isAuth, verify_access }) {
  const location = useLocation();

  useEffect(() => {
    setTimeout(verify_access, 100);
  }, [location.pathname, verify_access]);

  return isAuth ? <Outlet /> : <Navigate to="/login" replace />;
}

每次出口改变时如何执行useEffect

How to execute useEffect every time outlet changes

reactjs

react-router-dom