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

Thi*_*man 7 reactjs react-router react-router-redux

我正在尝试使用react-router 2.0和redux-simple-router,但我不能让它与查询解析一起使用.这是我从文档中得到的:

const appHistory = useRouterHistory({
  parseQueryString: parse,
  stringifyQueryString: stringify
})
Run Code Online (Sandbox Code Playgroud)

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

syncReduxAndRouter(appHistory, store, (state) => state.router)
Run Code Online (Sandbox Code Playgroud)

......我得到history.listen is not a function.直接使用来自react-router的browserHistory似乎可以正常使用redux-simple-router.为什么历史记录中缺少listen(),我该如何解决这个问题?

Thi*_*man 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}/>
Run Code Online (Sandbox Code Playgroud)

  • 这个问题在react-router包中肯定没有得到解决。我在尝试将 createBrowserHistory 而不是 createHistory 传递给 useRouterHistory 来实现基本名称路径时遇到了麻烦,并且我的 webpack bundle.js 返回了 Tim Fairbrother 收到的相同“TypeError:createHistory 不是函数”错误。React-router 开发人员似乎忽略了这个问题。 (3认同)
  • 从react-router导入的历史记录是一个对象(单例)。从history/lib导入的历史记录是一个创建/工厂函数。React 路由器在导出之前已经“创建”了历史记录。您可以将react-router中的历史对象转换为创建函数,例如` const createHistoryFunction = () =&gt; routerHashHistory`。如果您仍然遇到问题,请在要点中发布一些代码。 (2认同)