在用户保持空闲10秒后导航到其他组件

Question

当用户保持空闲10秒时，我想导航到/oauth2/token，但在10秒后的代码中，它不会导航到/outh2/token

下面是我的代码：

export default function Timeout(){
const idleTimerRef = useRef(null);
const [isUserIdle, setIsUserIdle] = useState(false);
const userIdle = (state) => {
setIsUserIdle(state);
};
return (
<div className="App">
<IdleTimer
ref={idleTimerRef}
timeout={10000}
onIdle={() => userIdle(true)}
onActive={() => userIdle(false)}
></IdleTimer>
{isUserIdle ? <Redirect to='/oauth2/token'/> : <Home />}

)}

Answer 1

我会使用钩子：路由器dom中的useEffect和useHistory。

const history = useHistory();
const MINUTE_MS = 100000; //NOT SURE ABOUT THE CORRCET NUMBER SHOULD BE HERE
useEffect(() => {
const interval = setInterval(() => {
history.push("/oauth2/token")
}, MINUTE_MS);
return () => clearInterval(interval); // This represents the unmount function, in which you need to clear your interval to prevent memory leaks.
}, [])

不要忘记导入useHistory和useEffect