如何将 react-router useRouterHistory 与 redux-simple-router 结合使用答案

【问题标题】：How to combine react-router useRouterHistory with redux-simple-router如何将 react-router useRouterHistory 与 redux-simple-router 结合使用
【发布时间】：2016-04-15 15:54:18
【问题描述】：

我正在尝试将 react-router 2.0 与 redux-simple-router 一起使用，但我无法让它与查询解析一起使用。这是我从文档中得到的：

const appHistory = useRouterHistory({
  parseQueryString: parse,
  stringifyQueryString: stringify
})

但是，如果我像这样将历史记录传递给 redux-simple-router ...

syncReduxAndRouter(appHistory, store, (state) => state.router)

...我得到history.listen is not a function。直接使用 react-router 中的 browserHistory 似乎与 redux-simple-router 一起工作得很好。为什么listen() 从历史记录中丢失，我该如何解决这个问题？

【问题讨论】：

如果您使用自定义历史记录，请确保使用 redux-simple-router 2.x npm install redux-simple-router@next 和 history 2.0。我需要basename 选项并通过安装这两个选项使其工作。

标签： reactjs react-router react-router-redux

【解决方案1】：

自从我发布此内容后，react-router 文档已更新：

import { useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

const createAppHistory = useRouterHistory(createBrowserHistory)

const appHistory = createAppHistory({
  parseQueryString: parse,
  stringifyQuery: stringify
})

<Router history={appHistory}/>

【讨论】：

我的印象是历史包现在是 react-router 的依赖项，但是我无法使用 react-router/lib/hashHistory 中的哈希历史。我在 react-router/lib/useBasename 的第 30 行出现错误“未捕获的 TypeError：createHistory 不是函数”。是否仍然需要安装历史包？
如果找不到历史包，我想你会得到一个不同的错误，但如果没有看到一些代码，我真的无能为力。
代码和你的一样，我从最基础的例子开始。如果将 'history/lib/createBrowserHistory' 替换为 'react-router/lib/hashHistory'，它会中断。如果我安装我自己的历史包，我会在我的构建中留下 2 个历史包的副本。如何访问 react-router 使用的历史实例？
从 react-router 导入的历史是一个对象（单例）。您从 history/lib 导入的历史是一个 create/factory 函数。 React 路由器在导出之前已经“创建”了历史。您可以将历史对象从 react-router 转换为 create 函数，如` const createHistoryFunction = () => routerHashHistory`。如果您仍然遇到问题，请在 gist 中发布一些代码。
这个问题在 react-router 包中肯定没有得到解决。我在尝试将 createBrowserHistory 而不是 createHistory 传递给 useRouterHistory 以实现基本名称路径时遇到了麻烦，并且我的 webpack bundle.js 返回了 Tim Fairbrother 收到的相同的“TypeError：createHistory 不是函数”错误。 react-router 开发人员似乎忽略了这个问题。