时间戳

首页 > 解决方案 > redux-observable 史诗中使用的“connected-react-router”中的`push`不会更改 url 并呈现空白页面

react-router-v4 - redux-observable 史诗中使用的“connected-react-router”中的`push`不会更改 url 并呈现空白页面

问题描述

push来自 redux-observable 史诗中使用的“connected-react-router”不会更改 url 并呈现空页面。state.router.location永远不会改变，所以我认为动作没有正确调度，但组件不再呈现 - 这是我无法弄清楚的变化。

该应用程序如下：

在减速器中：

const rootReducer: Reducer<any, any> = history => combineReducers({
  router: connectRouter(history),
})

在应用程序配置中：

const history = createBrowserHistory({
  basename: ROOT_PATH,
})

<Provider store={store}>
    <ConnectedRouter history={history}>
      <RootContainer />
    </ConnectedRouter>
</Provider>

const configureStore = (): Store => {
  return createStore(
    rootReducer(history),
    applyMiddleware(createEpicMiddleware(rootEpic)),
  )
}

在 RootContainer.js

import { withRouter } from "react-router-dom"

const Root = withRouter(connect(mapStateToProps, mapDispatchToProps)(RootComponent))
export default Root

在史诗中：

import { push } from "connected-react-router"

const navigateTo = (action$: ActionsObservable<Action>): ActionsObservable<Action> => (
  action$.pipe(
    ofType(SharedActions.OPEN_WINDOW),
    mergeMap((action) => {
      return of(push(action.payload.url))
    }),
  )
)

包.json

"connected-react-router": "^5.0.1",
"react": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"redux": "^3.6.0",
"redux-observable": "^0.17.0",
"rxjs": "^5.5.7",

我没有像此示例中那样的任何热模块更换，但我认为它不相关。

更新：

我添加了史诗来收听：

import { CALL_HISTORY_METHOD, LOCATION_CHANGE, push } from "connected-react-router"

似乎发送了以下操作：

{
  type: "@@router/CALL_HISTORY_METHOD"
  payload: {
    args: [ "new/path" ]
    method: "push"
  }
}

​​它只是对 url 没有任何影响。

更新

同样使用 Link (react-router-dom) 直接导航到“new/path”在组件内部效果很好，所以路径是正确的。

标签： react-router-v4redux-observableconnected-react-router

解决方案

看起来您可能忘记routerMiddleware在创建 Redux 商店时添加： https ://github.com/supasate/connected-react-router#step-2

您上面的应用配置应该是：

import { routerMiddleware } from "connected-react-router";

const history = createBrowserHistory({
  basename: ROOT_PATH,
})

<Provider store={store}>
    <ConnectedRouter history={history}>
      <RootContainer />
    </ConnectedRouter>
</Provider>

const configureStore = (): Store => {
  return createStore(
    rootReducer(history),
    applyMiddleware(
      createEpicMiddleware(rootEpic),
      routerMiddleware(history),
    ),
  )
}

推荐阅读