UseEffect 重定向导致闪烁和组件导航远离以在 React 中呈现 typescript

Question

I am using useEffect to navigate away from a page and to another based on a certain condition. However, when I do this, and the condition to redirect is present, page flashes briefly before redirecting.

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;

With the above example, if currentUserStatus is null and the page navigates to '/login' , it will flash the <h1>Test</h1> before redirecting. It's only a fraction of a second but it still occurs and is quite obvious.

How can I prevent this or find a better way to redirect?

Answer 1

Keep in mind that useEffect runs after the render cycle. So, if you want to make sure that the <h1>Test</h1> content isn't revealed to a user who isn't logged into your site, make sure that you use conditional rendering as well:

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;