React自定义history实现401跳转：URL变更但组件未刷新问题排查

1. history实例创建语法错误 #

createBrowserHistory是工厂函数，不需要用new关键字调用，错误的调用方式会生成不符合预期的history实例，导致Router组件无法监听到history的变更事件，所以跳转后路由没有重新匹配渲染。
修复history.js代码：

import { createBrowserHistory } from 'history';
// 去掉new关键字
export const history = createBrowserHistory();

2. 跳转逻辑写法错误 #

• 路径不匹配：你使用的是BrowserHistory模式，路由配置的登录路径是/login，但跳转时写的main/#/login是Hash路由的路径格式，实际跳转后的路径不符合路由匹配规则，所以不会渲染Login组件。
• 不需要包dispatch：dispatch是用来分发Redux action的方法，直接调用history.replace即可，不需要传入dispatch执行。

修复operation.js里的跳转逻辑：

export const getUser = () => async (dispatch) => {
    try {
        const user = await fetchUser();
        dispatch(actions.setUser(user));
    } catch {
        // 直接调用history.replace，路径和路由配置保持一致
        history.replace('/login');
    }
}

3. 路由配置冗余问题 #

你配置了两次完全相同的/login路由，属于无效冗余代码，可以删除重复条目：

<Router history={history}>
    <Switch>
        <Route path="/login">
            <Login />
        </Route>
        <Route path="/first">
            <First />
        </Route>
        <Route path="/">
            <Redirect to="/first" />
        </Route>
    </Switch>
</Router>

可选补充：版本匹配检查 #

确保你安装的history库的大版本和react-router-dom的版本适配：

• react-router-dom v5 对应 history v4/v5
• react-router-dom v6 对应 history v5+，且v6版本需要改用unstable_HistoryRouter传入自定义history实例。

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