React TypeScript中useEffect重定向引发页面闪烁的解决方法

你遇到的闪烁问题，本质是useEffect在组件渲染完成后才执行导航逻辑，导致原页面内容先被渲染出来，再触发跳转。以下是几种彻底解决的方案：

方案1：渲染阶段提前判断，跳过原内容渲染 #

直接在组件返回JSX前检查用户状态，未登录时不渲染原页面内容，或返回加载提示：

import authService from "../src/services/authService";
import { Navigate } from "react-router-dom";

function App() {
  // 如果用户状态不会动态变更，直接同步获取无需用state
  const currentUserStatus = authService.getCurrentUser();

  // 未登录时直接导航，不渲染原内容
  if (currentUserStatus == null) {
    // 可选：返回加载组件替代null，提升用户体验
    // return <div>加载中...</div>;
    return <Navigate to="/login" replace />;
  }

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

export default App;

方案2：用React Router的Navigate组件替代useEffect #

Navigate组件在渲染阶段触发导航，比useEffect执行时机更早，不会出现内容闪烁：

import authService from "../src/services/authService";
import { Navigate } from "react-router-dom";

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

  // 条件渲染Navigate组件，直接触发导航
  if (currentUserStatus == null) {
    // replace属性替换历史记录，避免后退回到当前页
    return <Navigate to="/login" replace />;
  }

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

export default App;

方案3：路由层面做权限守卫（推荐） #

将权限判断逻辑抽离到路由配置中，彻底避免未授权组件的渲染：

第一步：编写ProtectedRoute组件 #

import authService from "../src/services/authService";
import { Navigate, Outlet } from "react-router-dom";

export default function ProtectedRoute() {
  const currentUser = authService.getCurrentUser();
  // 已登录则渲染子路由内容，否则跳转到登录页
  return currentUser ? <Outlet /> : <Navigate to="/login" replace />;
}

第二步：配置路由 #

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import App from "./App";
import Login from "./Login";

const router = createBrowserRouter([
  {
    element: <ProtectedRoute />,
    // 所有需要权限的页面都放在children里
    children: [
      { path: "/", element: <App /> },
    ],
  },
  { path: "/login", element: <Login /> },
]);

function Root() {
  return <RouterProvider router={router} />;
}

export default Root;

这种方式将权限逻辑与业务组件解耦，符合React Router的设计思路，能彻底消除闪烁问题。

内容的提问来源于stack exchange，提问作者dros