Redux Toolkit场景下如何实现无渲染页面重定向？

你当前使用useEffect实现重定向的问题在于，useEffect是组件挂载完成后才执行的钩子，这意味着首页已经完成首次渲染，才会触发跳转，所以必然会出现短暂的内容闪烁。要避免这个过程，需要在组件渲染前完成判断并触发重定向，以下是不同场景的具体解决方案：

1. Next.js 场景 #

Page Router（旧路由系统） #

利用服务端渲染的getServerSideProps在请求阶段直接判断并返回重定向，客户端不会收到首页的渲染内容：

export async function getServerSideProps(context) {
  // 从请求头中获取cookie
  const userCookie = context.req.cookies.yourCookieName;
  
  if (!userCookie) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  
  return { props: {} };
}

App Router（新路由系统） #

在服务器组件的顶层直接判断，通过redirect函数立即跳转：

import { redirect, cookies } from 'next/navigation';

export default async function HomePage() {
  const userCookie = cookies().get('yourCookieName');
  
  if (!userCookie) {
    redirect('/login');
  }
  
  return <div>首页内容</div>;
}

2. 纯客户端 React（React Router） #

路由守卫直接判断 #

使用Navigate组件在组件渲染前完成判断，注意cookie获取必须是同步操作（比如直接解析document.cookie）：

import { Navigate } from 'react-router-dom';

function Home() {
  // 同步解析cookie
  const hasValidCookie = document.cookie.includes('yourCookieName=xxx');
  
  if (!hasValidCookie) {
    return <Navigate to="/login" replace />;
  }
  
  return <div>首页内容</div>;
}

路由 Loader 拦截（React Router v6+） #

在路由配置的loader函数中完成判断，触发HTTP级别的重定向：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    loader: () => {
      const hasValidCookie = document.cookie.includes('yourCookieName');
      if (!hasValidCookie) {
        throw new Response(null, {
          status: 302,
          headers: { Location: '/login' },
        });
      }
      return null;
    },
    element: <Home />,
  },
  { path: '/login', element: <Login /> },
]);

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

全局初始判断 #

如果必须异步获取认证状态，可以在根组件先展示空白或加载态，避免首页内容渲染：

import { useState, useEffect } from 'react';
import { Navigate } from 'react-router-dom';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(null);

  useEffect(() => {
    // 同步或异步获取认证状态
    const cookie = document.cookie.includes('yourCookieName');
    setIsAuthenticated(cookie);
  }, []);

  // 未完成判断时，返回空或加载容器
  if (isAuthenticated === null) {
    return null;
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <Home />;
}

核心思路总结 #

要彻底避免首页渲染，优先级最高的方案是在服务端完成判断并返回重定向响应，这样客户端根本不会接收到首页的渲染资源；客户端场景则需要尽量在组件渲染流程的早期（路由守卫、同步判断）完成认证校验，避免等到组件挂载后再处理。

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