React-Router-Redux: export of 'syncHistoryWithStore' not found in 'response-router-redux'

Question

I am trying to integrate Redux into my application and am experiencing a problem with React-Router-Redux 5.0.0-alpha.

I get an error: "export" syncHistoryWithStore "was not found in" response-router-redux ". The official manuals talk about importing syncHistoryWithStore, which I did: https://github.com/reactjs/react-router-redux

I also looked inside the response-router-redux package, and there seems to be no sign of syncHistoryWithStore.

What am I missing?

Here is my index.js. Redux works, but I could not promote a new route only with ConnectedRouter and, apparently, due to the features of the browser.

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')); 

Package Options:

 react-redux: "^5.0.4", react-router: "^4.1.1", react-router-dom: "^4.1.1", react-router-redux: "^5.0.0-alpha.6", 

Answer 1

For those who are experiencing the same problem, I will post my working index.js file (note: I left my custom components and reducers for further guidance).

Now I do not use syncHistoryWithStore . I use the history/createBrowserHistory and create a story for ConnectedRouter. Everything seems to work.

I use Redux DevTools and also used node environments to switch between dev and prod modes.

Obviously, no guarantees are provided.

 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') )