React 17与react-router-dom 5.2 登录后history.push更新URL但页面未跳转

• 技术栈版本：React 17.x、react-router-dom 5.2
• 异常表现：登录流程执行完成后，代码中调用history.push('/')跳转首页时，浏览器地址栏的URL已正确更新，但页面视图未同步切换到首页路由对应的组件内容。

• 路由组件导入错误：代码中使用import { BrowserRouter as Router, ... }的写法，将BrowserRouter重命名为Router使用。BrowserRouter组件本身并不接收history属性，它会在内部自动生成独立的history实例，外部传入的自定义history参数会被完全忽略。
• 实例脱钩：当前代码中存在两个互不关联的history实例：一个是BrowserRouter内部生成、被路由系统监听的实例；另一个是utils/history.js中通过createBrowserHistory创建、被Login组件引用的外部实例。对外部实例执行push操作只会更新浏览器地址栏，无法被路由系统感知，自然不会触发组件视图更新。
• 额外潜在问题：
  • 在组件渲染阶段直接执行history.push('/login')，属于React渲染流程中的命令式副作用，会导致渲染状态不一致
  • 路由配置未加精确匹配，path="/"作为前缀路由会优先匹配所有路径，导致所有页面都命中首页路由规则

• 替换路由组件导入方式：从react-router-dom导入原生的基础Router组件（注意不要使用BrowserRouter的别名替换），该组件支持接收自定义的history属性，可将外部创建的history实例和路由系统正式绑定。
• 替换渲染阶段的命令式跳转：使用react-router-dom提供的<Redirect>组件实现未登录场景的路由跳转，避免在组件渲染流程中直接调用history方法产生副作用。
• 调整路由匹配规则：给首页根路径的路由加上exact修饰符，确保路由匹配按精确规则执行，避免前缀匹配导致的路由命中错误。

修正后的App.js核心代码片段：

import { useEffect, useState } from 'react';
// 导入原生基础Router，而非BrowserRouter
import { Router, Switch, Route, Redirect } from "react-router-dom";
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import { isLoggedInServer } from "../src/utils/auth"
import history from "./utils/history"
import './App.css';

function App() {
  const [isAuthed, setIsAuthed] = useState()

  useEffect(() => {
    if (typeof isAuthed === 'undefined') {
      isLoggedInServer().then(flag => setIsAuthed(flag))
    }
  }, [])

  if (typeof isAuthed === 'undefined') {
    return <div>Please wait...</div>
  }

  return (
    {/* 将自定义history绑定到基础Router上，保证和业务代码中引入的history是同一个实例 */}
    <Router history={history}>
      <Switch>
        {/* 根路径加exact精确匹配 */}
        <Route exact path="/">
          <Dashboard setIsAuthed={setIsAuthed} />
        </Route>
        <Route path="/login">
          <Login setIsAuthed={setIsAuthed} />
        </Route>
        {/* 未登录场景通过Redirect声明式跳转，不在渲染期执行命令式history方法 */}
        {!isAuthed && <Redirect to="/login" />}
      </Switch>
    </Router>
  );
}

export default App;

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