Reactjs 如何在渲染组件之前检查条件？

如果用户已登录，我尝试将用户重定向到/dashboard页面。但是，主页/总是首先呈现，然后useEffect启动，然后路由将重定向到/dashboard

如果您转到，并且已登录，则不会先在主页路径上暂停，然后再重定向到

这就是我现在的做法，顺便说一句，我正在使用nextjs。我正在使用useLayoutEffect检查CurrentUsers是否来自useContext挂钩，如果可用，则将其推送到/dashboard：

import React, { useLayoutEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

const Home = () => {
  const router = useRouter();
  const { currentUser } = useAuth();

  useLayoutEffect(() => {
    if (currentUser && currentUser.email) {
      router.push('/dashboard');
    }
  }, [currentUser]);

  return (
    <Container maxWidth="sm" className={classes.root}>
      <Grid container className={classes.gridContainer}>
        <Link href="/login">
          <Button>
            Login
          </Button>
        </Link>
        <Link href="/signup">
          <Button>
            Sign up
          </Button>
        </Link>
      </Grid>
    </Container>
  );
};

export default Home;

---

如果添加一个标志延迟渲染，直到检查用户是否登录，您会怎么想？ 另外，我相信你可以在这里使用useffect

---

如果添加一个标志延迟渲染，直到检查用户是否登录，您会怎么想？ 另外，我相信你可以在这里使用useffect

---

用户必须去某个地方。我假设当前用户是在上下文中获取的。当该请求发生时，您也可以从上下文中公开加载状态，并显示正在获取数据的指示。 当用户可能在1秒后被重定向到/dashboard时，查看/home屏幕对用户没有任何价值，因此显示微调器或其他更好的功能，直到用户明确要去哪里

---

我不会用useLayoutEffect做这件事。此钩子保留用于有关DOM或呈现的更改，而不是网络解决方案。

用户必须去某个地方。我假设当前用户是在上下文中获取的。当该请求发生时，您也可以从上下文中公开加载状态，并显示正在获取数据的指示。 当用户可能在1秒后被重定向到/dashboard时，查看/home屏幕对用户没有任何价值，因此显示微调器或其他更好的功能，直到用户明确要去哪里

---

我不会用useLayoutEffect做这件事。此钩子保留用于有关DOM或渲染的更改，而不是网络解决方案。

您不能只放置重定向而不使用效果吗？您不能只放置重定向而不使用效果吗？

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

const Home = () => {
  const [checked, setChecked] = useState(false);
  const router = useRouter();
  const { currentUser } = useAuth();

  useEffect(() => {
    if (currentUser && currentUser.email) {
      router.push('/dashboard');
    } else {
       setChecked(true)
    }
  }, [currentUser]);

  if (!checked) return null;

  return (
    <Container maxWidth="sm" className={classes.root}>
      <Grid container className={classes.gridContainer}>
        <Link href="/login">
          <Button>
            Login
          </Button>
        </Link>
        <Link href="/signup">
          <Button>
            Sign up
          </Button>
        </Link>
      </Grid>
    </Container>
  );
};

export default Home;