React Router 6中history.push改URL但不更新视图，forceRefresh配置无效

React Router v6 内置的 <BrowserRouter> 组件会内部创建独立的 history 实例，你单独在 history.js 中通过 createBrowserHistory 生成的实例和路由组件绑定的实例不是同一个。你调用自定义history的push方法只会修改浏览器地址栏的URL，无法通知React Router触发路由对应的组件重渲染，所以出现了URL变化但视图不变的问题，forceRefresh 配置因为是挂载在你自定义的history实例上，自然也不会生效。

有两种常用的方案可以解决这个问题：

方案1：使用 <HistoryRouter> 绑定外部history实例 #

React Router v6 提供了支持传入外部history实例的路由组件，你只需要修改项目入口的路由配置即可：

1. 如果你用的是 v6.4+ 稳定版本，直接使用 <HistoryRouter>：

// 入口文件 index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HistoryRouter } from 'react-router-dom';
import history from './history'; // 导入你自定义的history实例
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HistoryRouter history={history}>
    <App />
  </HistoryRouter>
);

如果你用的是较早的v6版本，需要用 unstable_HistoryRouter 别名导入：

import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

修改完成后你原有的 history.push('/signin') 逻辑不需要改动，就可以正常触发视图更新。

方案2：通过useNavigate传递跳转方法（更符合v6设计规范） #

不需要维护外部history实例，直接在调用注册action的组件中拿到路由跳转方法传入action即可：

1. 首先修改注册页面组件的逻辑：

// 注册页面组件
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { register } from './authSlice';

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

  // 注册提交回调
  const handleRegisterSubmit = (userFormData) => {
    // 将navigate作为参数传入register action
    dispatch(register(userFormData, navigate));
  }
  // 其余组件逻辑省略
}

2. 修改 authSlice.js 中的register action逻辑：

// 删掉原来的history导入
export const register = (user, navigate) => async (dispatch) => {
  try {
    const userData = {
      username: user.username,
      email: user.email,
      contact: user.contact,
      password: user.password,
    };
    const response = await axios.post(
      "http://localhost:4000/auth/register",
      userData
    );

    if (response) {
      dispatch(registerSuccess(response.data));
      toast.success("Registration Successful. You can now login");
      // 替换原来的history.push为传入的navigate方法
      navigate("/signin");
    } else {
      dispatch(registerFailure());
      toast.error("registration failed");
    }
  } catch (error) {
    if (error.response?.status === 400) toast.error(error.response.data);
    dispatch(registerFailure());
  }
};

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