react-admin中history.push更新URL但未跳转至dashboard问题求助

问题根因排查 #

• 核心问题为两层Router嵌套导致路由上下文不统一：index.js中已经用<BrowserRouter>包裹了根组件，Login组件内部额外声明了一层<Router>，你调用history.push时使用的是外层BrowserRouter的history实例，但/dashboard的路由规则是注册在内层Router上的，外层无法感知内层的路由配置，因此仅会更新URL，不会触发对应页面的渲染。
• 次要问题为Route组件写法不规范：你在同一条Route声明中同时使用了component={Dashboard}属性和<Dashboard />子组件，属于重复声明，会导致react-router匹配逻辑异常。

修复步骤 #

1. 删除Login组件内的多余<Router>标签，仅保留外层的BrowserRouter即可，修改后路由部分代码如下：

export default function BasicExample() {
 return (
  <Switch>
    <Route exact path="/dashboard" component={Dashboard} />
    {/* 其余路由规则 */}
  </Switch>
 )
}

2. 确认调用的history实例和外层BrowserRouter上下文一致：函数组件建议直接使用useHistory hook获取实例，不要使用自定义的history对象，示例代码如下：

import { useHistory } from 'react-router-dom';
const Login = () => {
  const history = useHistory();
  function handleLogin (e) {
    // 登录逻辑
    history.push("/dashboard");
  }
}

3. 若你使用的是react-router v6版本，需要适配v6 API规范：将Switch替换为Routes，component={Dashboard}替换为element={<Dashboard />}，useHistory替换为useNavigate，调用方式改为navigate("/dashboard")。

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