React中将useNavigate()对象传入异步处理函数是否存在问题？

你当前的实现方式属于明确的不良实践，哪怕关闭序列化检查能暂时跑通，也存在不少潜在风险，完全不推荐这么写。

• 违反Redux核心设计原则：Redux要求所有存入store、通过action传递的内容必须是可序列化的纯值，navigate是React Router生成的包含内部引用、闭包的函数对象，本身不可序列化。哪怕你临时关闭序列化检查，后续使用Redux DevTools做时间旅行调试、状态持久化/回放的时候，这类函数引用会直接失效，导致调试功能完全不可用，甚至引发运行时错误。
• 职责边界混乱：Redux本身是状态管理容器，只应该负责存储和更新全局状态，路由跳转属于视图层/副作用层的逻辑，不应该耦合在reducer里执行。reducer必须是纯函数，不能在里面执行带副作用的跳转操作，你现在在authenticate.fulfilled的reducer回调里直接调用navigate，完全破坏了reducer的纯函数特性。
• 上下文失效风险：React Router v6的navigate是依赖当前组件树路由上下文生成的函数，如果你把它存在action payload里，后续如果登录组件卸载、路由树变更，这个函数持有的闭包上下文可能失效，触发跳转时会出现找不到路由上下文的运行时错误。旧版本可以传history是因为v5及之前用的是全局单例的history对象，引用固定不会失效，和v6的navigate性质完全不一样。
• 类型安全缺失：你代码里给navigate写的类型是any，等于完全放弃了TS的类型校验，后续传参错误、路由路径写错都不会有编译提示，很容易出线上bug。

你不需要把navigate对象传到Redux层，路由跳转逻辑直接放在组件侧处理就行，完全不需要修改序列化检查的默认配置。

第一步：改造authSlice，移除所有路由相关逻辑 #

只保留认证相关的状态处理，不要传navigate、不要在reducer里做跳转：

import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { API } from "../../app/services";

export type User = {
  email: string,
}

export interface AuthState {
  user: User | null,
  access: string | null,
  loading: boolean
}

const initialState: AuthState = {
  user: null,
  access: null,
  loading: false
}

// 入参只需要认证必要的账号密码，不需要传路由相关对象
export interface IAuthArgs {
  email: string,
  password: string,
}

export const authenticate = createAsyncThunk(
  'auth/authenticate',
  async (args: IAuthArgs) => {
    const response = await API.authenticate(args.email, args.password);
    return response.access;
  }
)
  
export const authSlice = createSlice({
  name: 'authenticator',
  initialState,
  reducers: {
    logout: (state) => {
      state.access = null;
      state.user = null;      
    }
  },
  extraReducers: (builder) => {
    builder
    .addCase(authenticate.pending, (state) => {
      state.loading = true;
    })
    .addCase(authenticate.fulfilled, (state, action: PayloadAction<string>) => {
      state.loading = false;
      state.access = action.payload;
    })
    .addCase(authenticate.rejected, (state, action) => {
      state.loading = false;
      // 这里处理登录失败的错误提示即可
      console.log(action.error.message);
    })
  },
});
  
  
const { actions, reducer } = authSlice;
export const { logout } = actions;
export default authSlice.reducer;

第二步：改造Login.tsx，把跳转逻辑放在组件侧 #

dispatch完thunk之后，等异步认证完成再执行跳转，全程不需要把navigate传入Redux：

import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import "./Login.css";
import { authenticate } from "../features/auth/authSlice";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";


interface LocationState {
  target_url: string | null;
}

const Login: React.FC = () => {
    const [email, setEmail] = useState("swpulitzer@gmail.com");
    const [password, setPassword] = useState("password");
    const location = useLocation();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    // 直接从store取登录加载状态，不用自己维护
    const loading = useSelector((state: RootState) => state.auth.loading);

    const { target_url } = (location.state as LocationState) || { target_url: null};
  
    function validateForm() {
      return email.length > 0 && password.length > 0;
    }
    
    async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
      event.preventDefault();
      // 等待认证请求完成，失败会直接抛错不会执行后续跳转
      await dispatch(authenticate({email, password})).unwrap();
      // 认证成功再跳转，逻辑和Redux完全解耦
      navigate(target_url ?? '/', { replace: true });
    }
  
    return (
      <div className="Login">
        <Form onSubmit={handleSubmit}>
          <Form.Group controlId="email">
            <Form.Label>Email</Form.Label>
            <Form.Control
              autoFocus
              type="email"
              value={email}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
            />
          </Form.Group>
          <Form.Group controlId="password">
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              value={password}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
            />
          </Form.Group>
          <Button
            size="lg"
            type="submit"
            disabled={!validateForm() || loading}>
            {loading ? '登录中...' : 'Login'}
          </Button>
        </Form>
      </div>
    );
  }

  export default Login;

第三步：实现未认证重定向逻辑 #

直接封装一个受保护路由组件即可，不需要额外传参：

import { Navigate, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";

export default function ProtectedRoute({ children }: {children: JSX.Element}) {
  const access = useSelector((state: RootState) => state.auth.access);
  const location = useLocation();

  if (!access) {
    // 未登录就跳登录页，把当前路径存在location state里，登录成功就能直接拿到
    return <Navigate to="/login" state={{ target_url: location.pathname }} replace />
  }

  return children;
}

路由配置的时候直接套在需要鉴权的页面外层就行：

<Route path="/dashboard" element={
  <ProtectedRoute>
    <Dashboard />
  </ProtectedRoute>
} />

• 不要在组件里直接import store然后调用store.dispatch，一定要用react-redux提供的useDispatch钩子，否则会丢失React上下文的关联，后续SSR、上下文嵌套场景下会出问题。
• 永远不要为了图方便关闭Redux的序列化检查，这个检查是帮你提前规避不合理写法的，不是需要绕过的限制。
• reducer里绝对不能执行任何副作用操作，包括跳转、接口请求、本地存储操作，这类逻辑要么放在组件里，要么放在thunk的异步回调里，绝对不能放到reducer中。

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