我一直在尝试将Redux集成到我的应用程序中,并且遇到使用React-Router-Redux 5.0.0-alpha.6的问题
我收到错误:’react-router-redux’中找不到“export’syncHistoryWithStore’.官方指南说要导入syncHistoryWithStore,我已经完成了:
https://github.com/reactjs/react-router-redux
我也查看了react-router-redux包里面,似乎没有任何syncHistoryWithStore的迹象.
我错过了什么?
这是我的index.js. Redux正在工作,但我无法使用ConnectedRouter推送新路由,显然这是由于浏览器历史事物.
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",
对于遇到相同问题的任何人,我将发布我的工作index.js文件(注意:我已经离开了我的自定义组件和reducers以获得进一步的指导).
我现在不使用syncHistoryWithStore.我使用插件历史/ createBrowserHistory并为ConnectedRouter创建历史记录.到目前为止,一切似乎都在起作用..
我使用Redux DevTools并且还使用节点环境在dev和prod模式之间切换.
显然没有提供保修.
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,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,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') )