React18+React-Redux调用history.push时URL变更但组件未加载问题

你遇到的URL更新但页面不渲染问题核心原因是：React Router v6 版本的BrowserRouter组件不支持手动传入自定义history属性，你在外部自行创建的history实例和BrowserRouter内部维护的路由状态实例完全独立，调用外部实例的push方法只会修改浏览器地址栏，无法触发Router内部的状态更新，自然不会匹配渲染对应路由组件。
另外你代码里写的let navigate = useNavigate;是无效代码，useNavigate是React Hook，只能在函数组件或自定义Hook顶层调用，写在普通Redux action函数里没有任何作用。

方案1：使用HistoryRouter适配外部跳转场景（推荐，适合Redux/工具函数中需要跳转的需求） #

该方案适配你当前所有依赖版本，不需要改动现有业务逻辑结构：

1. 先确认src/utils/history.js文件代码正确，导出独立的history实例：

// src/utils/history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory();

2. 修改入口文件的Router引入和使用方式，替换掉原来的BrowserRouter：

// 入口文件修改导入部分
import { unstable_HistoryRouter as HistoryRouter, Route, Routes } from "react-router-dom";
// 其他导入保持不变...

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      {/* 替换原来的Router，传入自定义history实例 */}
      <HistoryRouter history={history}>
        <Routes>
          <Route path="/login" element={<SignInSide />} />
          <Route path="/home" element={<Dashboard />} />
          <Route path="/" element={<App />} />
        </Routes>
      </HistoryRouter>
    </Provider>
  </React.StrictMode>
);

3. 删除Redux action中无效的let navigate = useNavigate;行，原有history.push("/home")逻辑可以正常生效，地址栏更新后会自动匹配渲染对应组件。

补充：API名带的unstable_前缀不代表生产不可用，React Router官方在后续v6版本正式暴露HistoryRouter前一直用该前缀做兼容，现有生产项目大量使用该方案，稳定性有保障。

方案2：将路由跳转逻辑迁移到组件层（官方推荐规范） #

如果不想用带前缀的API，可以遵循React Router的设计规范，不在Redux action这类非组件逻辑中做路由跳转：

1. 入口文件保持使用普通BrowserRouter，不需要传入自定义history属性。
2. 修改登录组件逻辑，在组件内拿到navigate方法，等Redux异步action执行成功后再触发跳转：

// SignInSide组件内
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";

function SignInSide() {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    let user = {
      email: form.get('email'),
      password: form.get('password')
    }
    // 派发异步action，等登录成功后再跳转
    dispatch(LoginUser(user)).then(() => {
      navigate("/home");
    })
  };

  return (/* 原有组件UI */);
}

3. 调整Redux中的LoginUser action，确保返回Promise，移除内部的history相关逻辑，同时修正原有持久化逻辑的顺序错误：

export function LoginUser(LogInData) {
  return (dispatch) => {
    dispatch(AuthActions.userSignIn());
    // 先设置持久化再调用登录方法，原有逻辑顺序错误会导致登录态存储失败
    return setPersistence(auth, browserSessionPersistence)
      .then(() => signInWithEmailAndPassword(auth, LogInData.email, LogInData.password))
      .then((userCredential) => {
        const user = userCredential.user;
        dispatch(AuthActions.userSignInSuccess(user));
        return user;
      })
      .catch((error) => {
        dispatch(AuthActions.userSignInFailed(error));
        throw error;
      });
  };
}

基于你当前使用的React18 + Redux + MUI + React Router技术栈，标准项目结构如下，直接初始化即可避免上述路由问题：

• 固定兼容依赖版本：
  • react: ^18.2.0
  • react-dom: ^18.2.0
  • react-router-dom: ^6.14.0
  • history: ^5.3.0
  • @reduxjs/toolkit: ^1.9.5
  • react-redux: ^8.1.1
  • @mui/material: ^5.14.0
• 目录结构规范：
  • src/
    • utils/
      • history.js （独立history实例，仅使用HistoryRouter方案时需要）
    • store/
      • index.js （Redux store配置，Reducer、中间件统一在这里注册）
    • router/
      • index.jsx （路由配置集中管理，统一导出Routes节点）
    • components/ （通用业务组件）
    • pages/ （路由页面组件，比如登录页、Dashboard页）
    • App.jsx （根组件）
    • main.jsx （项目入口，挂载Provider、Router等全局节点）

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