我一直在尝试将Redux集成到我的应用程序中,但在使用React-Router-Redux 5.0.0-alpha.6时遇到了问题
我收到错误:“在'react-router-redux‘中找不到导出'syncHistoryWithStore’。官方指南说要导入syncHistoryWithStore,我已经这样做了:https://github.com/reactjs/react-router-redux
我还查看了react-router-redux包内部,似乎没有任何syncHistoryWithStore的迹象。
我遗漏了什么?
这是我的index.js。browserHistory起作用了,但我不能只使用ConnectedRouter来推动新的路线,显然这要归功于Redux的事情。
import React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux';
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware, syncHistoryWithStore, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
const store = configure();
const history = syncHistoryWithStore(createBrowserHistory(), store);
const navigation = (
<Provider store={store}>
<ConnectedRouter history={history}>
<SystemManager>
<div>
<Route path="/" component={Dashboard}/>
<Route path="/dashboard" component={Dashboard} />
.....
<Route component={NotFound} />
</div>
</SystemManager>
</ConnectedRouter>
</Provider>
);
injectTapEventPlugin();
render(navigation, document.getElementById('app'));包版本:
react-redux: "^5.0.4",
react-router: "^4.1.1",
react-router-dom: "^4.1.1",
react-router-redux: "^5.0.0-alpha.6",发布于 2017-09-02 00:43:24
对于遇到同样问题的任何人,我将发布我的工作index.js文件(注意:我已经留下了我的自定义组件和reducers,以获得进一步的指导)。
我现在没有使用syncHistoryWithStore。我使用插件history/createBrowserHistory并为ConnectedRouter创建历史记录。到目前为止,一切似乎都很顺利..
我使用Redux DevTools,还使用节点环境在开发模式和生产模式之间切换。
显然没有提供任何保证。
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { Provider } from 'react-redux'
import createHistory from 'history/createBrowserHistory'
import { Route, Switch } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';
import menu from './reducers/menu';
import permissions from './reducers/permissions';
import sitePreferences from './reducers/sitePreferences';
import user from './reducers/user';
// Custom Page Container Imports (these are the visual layout components)
import SystemManager from './containers/systemManager/systemManager';
import LoginPage from './containers/pages/login-page/';
import NotFound from './containers/pages/not-found/not-found';
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()
// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history)
const isProduction = process.env.NODE_ENV === 'PRODUCTION';
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Redux: Store creation and middleware application based on production/development mode
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
let store = null;
if (isProduction === true) {
store = createStore(
combineReducers({
menu,
permissions,
sitePreferences,
user,
routerReducer
}),
compose(applyMiddleware(middleware))
);
} else {
store = createStore(
combineReducers({
menu,
permissions,
sitePreferences,
user,
routerReducer
}),
composeWithDevTools(applyMiddleware(middleware))
);
}
injectTapEventPlugin(); // Material UI
ReactDOM.render(
<Provider store={store}>
{ /* ConnectedRouter will use the store from Provider automatically */ }
<ConnectedRouter history={history}>
<SystemManager>
<Switch>
<Route path="/dashboard" component={NotFound} />
<Route path="/login" component={LoginPage} />
</Switch>
</ SystemManager>
</ConnectedRouter>
</Provider>,
document.getElementById('app')
)https://stackoverflow.com/questions/43721293
复制相似问题