redux--可观察史诗中使用的“连接-反应-路由器”中的“提示”不会更改url并呈现空页
redux--可观察史诗中使用的“连接-反应-路由器”中的“提示”不会更改url并呈现空页
提问于 2018-11-09 14:18:50
在redux可观察史诗中使用的“连接-反应-路由器”中的push不会更改url并呈现空页。state.router.location从不更改，因此我认为操作没有得到正确的分派，但是组件不再呈现--这是一个我无法理解的更改。
该应用程序如下：
减速器：
const rootReducer: Reducer<any, any> = history => combineReducers({
router: connectRouter(history),
})在app配置中：
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))
}),
)
)package.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 ()直接导航到"new/ path“的内部组件非常有效，因此路径是正确的。
Stack Overflow用户
发布于 2019-10-17 13:11:34
在创建Redux存储时，您可能忘了添加routerMiddleware：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),
),
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53227446
复制相关文章
相似问题
腾讯云开发者
