返回组件消息5秒，然后重定向
我希望实现这样的情况:如果我使用不正确的查询参数导航到我的URL，就会显示一条消息，然后重定向到另一个页面。
想象一下，当您没有登录时，尝试导航到一个只有登录用户才能看到的页面。我希望它呈现这样的内容：“您需要登录才能看到这个内容”，然后在2-5秒后页面重定向到/login页面。
注意：包含的一些代码只是伪代码。
我知道我可以用简单的三元显示登录页面或重定向。
return hasQueryParams ? <MyLoggedInPage /> : <Redirect to={`/login`} />然而，我似乎不能让一个setTimeout工作来延迟重定向.
const redirect = () => {
let redirect = false;
setTimeout(() => {
redirect = true;
}, 5000);
return redirect
? <Redirect to={`/login`} />
: <h1>Need to be logged in for that</h1>;
}
return redirect();为此，我得到了一个错误：Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it。
我还试过使用useState
const [redirectNow, setRedirectNow] = useState(false);
useEffect(() => {
// Some code unrelated to the timeout/redirect
}, []);
const redirect = () => {
setTimeout(() => {
setRedirectNow(false);
}, 5000);
return redirectNow
? <Redirect to={`/login`} />
: <h1>Need to be logged in for that</h1>;
}
return redirect();但这也会产生一个不同的错误：Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3
我从进一步阅读中了解到，我们不能从事件处理程序中访问useState内容。
更新
我还应该补充一点，目前我已经将useEffect用于其他事情。
回答 2
Stack Overflow用户
发布于 2021-01-20 08:39:36
interval.
- Redirect
- 使用状态来保持是否重定向的跟踪。在更新状态时，
- 在更新状态后更新状态。
function RedirectComponent() {
const [shouldRedirect, setShouldRedirect] = React.useState(false);
React.useEffect(() => {
const id = setTimeout(() => {
setShouldRedirect(true);
}, 5000);
return () => clearTimeout(id);
}, []);
if (shouldRedirect) return <Redirect to="/login" />
return <h1>This is the message</h1>
}Stack Overflow用户
发布于 2021-01-20 08:43:15
我更喜欢使用custom hook。
在这种情况下，useSetTimeout可以工作。
import React, { useState, useEffect, useRef } from 'react';
function useSetTimeout(timeoutCallback, seconds) {
const timeoutId = useRef();
useEffect(() => {
timeoutId.current = setTimeout(timeoutCallback, seconds);
return () => clearTimeout(timeoutId.current);
}, [])
}
function YourComponent(){
const [redirectNow, setRedirectNow] = useState(false);
useSetTimeout(()=>{
setRedirectNow(true);
}, 5000);
return redirectNow ? <Redirect to={`/login`} /> : <h1>Need to be logged in for that</h1>;
}https://stackoverflow.com/questions/65805734
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号