history.push('/dashboard') 正在更新 url 但没有导航到它？答案

【问题标题】：history.push('/dashboard') is updating the url but not navigating to it?history.push('/dashboard') 正在更新 url 但没有导航到它？
【发布时间】：2021-09-15 14:37:04
【问题描述】：

stackoverflow 中有这样的问题。但我无法找到解决方案。

这是我的 index.js 的一部分

ReactDOM.render(
<BrowserRouter>
 <Provider store={store}>
   <Login />
 </Provider>
</BrowserRouter>,
document.getElementById('root')
);

这是我的登录组件的一部分

export default function BasicExample() {
 return (
 <Router>
  <Switch>
    <Route exact path="/dashboard" component={Dashboard}>
      <Dashboard />
    </Route>
    ........
  </Switch>
  </Router>
 )
}

const Login = () => {
  function handleLogin (e) {
     .....
     history.push("/dashboard");
     .....
  }
}

我不知道出了什么问题。我正在使用 react-admin 模板。有人可以帮忙吗？

【问题讨论】：

你确定history.push 被调用了吗？据我所知（不多），您唯一的错误是将 Dashboard 作为 component 属性和 Route 的子项（只选择一个）；将您的整个应用组件称为“登录”可能会产生误导，但不是技术错误
能否请您展示您的Login 组件的完整版本？

标签： reactjs react-admin

【解决方案1】：

来自文档

使用 HTML5 历史 API（pushState、replaceState 和 popstate 事件）以使您的 UI 与 URL 保持同步。

我没有看到你在哪里传递/声明历史对象在您的登录你可以使用这个：

import { useHistory } from "react-router-dom";
let history = useHistory();

或者直接使用普通路由器

import { Router } from "react-router";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();
ReactDOM.render(
  <Router history={history}>
    <Provider store={store}>
      <Login />
    </Provider>
  </Router>,
)

【讨论】：