从 redux thunk 访问 `history` 对象的正确方法？

问题描述

我有一些需要调用 history.push() 的 redux thunk。

首先，我试图避免在 thunk 调用中传递 history 对象，因此我在代码中进行了以下更改：

从这里：

index.tsx

import { browserRouter } from "react-router-dom";

ReactDOM.render(
  <browserRouter>
    <App/>
  </browserRouter>
);

为此：

index.tsx

import { Router } from "react-router-dom";
import { history } from "./history";

ReactDOM.render(
  <Router history={history}>
    <App/>
  </Router>
);

history.ts

import { createbrowserHistory } from "history";

export const history = createbrowserHistory();

但是现在我已经进入了我项目的 SSR 阶段，这已经变成了一场噩梦。因为我无法在我的服务器代码 (NodeJS) 上调用 createbrowserHistory()。

问题

上面的模式非常适合与 redux thunk 和其他一些需要调用 history.push() 的辅助函数一起使用。我必须从需要它的任何文件中import { history } from "@src/history"; 并直接使用它。

但由于这与我的 SSR 代码冲突，我想知道这种情况的最佳实践/推荐方法是什么。我应该使用 history 从组件中获取 const history = useHistory() 对象并将其传递给需要它的 thunk / 函数吗？或者有更好的方法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

history react-router react-router-dom reactjs reactjs redux redux redux