javascript UseEffect重定向会导致 Flink 和组件导航远离React typescript 中的呈现

xkrw2x1b 于 2023-01-01 发布在 Java

关注(0)|答案(1)|浏览(112)

我正在使用useEffect根据特定条件从一个页面导航到另一个页面。但是，当我这样做时，重定向的条件存在，页面在重定向前短暂 Flink 。

import authService from "../src/services/authService";

function App() {
  const [currentUserStatus, setCurrentUserStatus] = React.useState(
    authService.getCurrentUser()
  );

  const navigate = useNavigate();

  useEffect(() => {
    if (currentUserStatus == null) {
      navigate("/login");
    }
  });

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
}

export default App;

在上面的例子中，如果currentUserStatus为空，页面导航到'/login'，它会在重定向之前 Flink <h1>Test</h1>，这只是几分之一秒，但它仍然发生，而且非常明显。
我如何防止这种情况或找到更好的方法来重定向？

JavaScript

来源：https://stackoverflow.com/questions/74957595/useeffect-to-redirect-causes-flicker-and-component-navigation-away-from-to-rende

1条答案

按热度按时间

ccrfmcuu1#

请记住useEffect在渲染周期之后运行。因此，如果您想确保<h1>Test</h1>内容不会显示给未登录站点的用户，请确保您也使用了条件渲染：

function App() {
  const [currentUserStatus, setCurrentUserStatus] = React.useState(
    authService.getCurrentUser()
  );

  const navigate = useNavigate();

  useEffect(() => {
    if (currentUserStatus == null) {
      navigate("/login");
    }
  });

  if (!currentUserStatus) return <h1>Loading...</h1>

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
}

export default App;

赞(0）回复(0）举报 2023-01-01

我来回答

javascript UseEffect重定向会导致 Flink 和组件导航远离React typescript 中的呈现

1条答案

相关问题

热门标签

最新问答