时间戳

首页 > 解决方案 > 返回组件消息 5 秒，然后重定向

javascript - 返回组件消息 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其他东西了。

标签： javascriptreactjsredirectuse-state

解决方案

  1. 使用状态来跟踪是否重定向。
  2. 间隔后更新状态。
  3. 更新状态时重定向。
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>
}

推荐阅读