关于reactjs：React-Router-Redux：在’react-router-redux’中找不到导出’syncHistoryWithStore’


React-Router-Redux: export 'syncHistoryWithStore' was not found in 'react-router-redux'

我一直在尝试将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。 Redux正在运行，但是我无法仅通过ConnectedRouter推送新路由，这显然是由于browserHistory所致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
           
            <Route path="/" component={Dashboard}/>
            <Route path="/dashboard" component={Dashboard} />
            .....

            <Route component={NotFound} />
           
          </SystemManager>
      </ConnectedRouter>
    </Provider>
);
injectTapEventPlugin();

render(navigation, document.getElementById('app'));

套件版本：

1
2
3
4
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文件(注意：我将自定义组件和reducer留在里面以获取进一步的指导)。

我现在不使用syncHistoryWithStore。 我使用插件history/createBrowserHistory并为ConnectedRouter创建历史记录。 到目前为止一切似乎都正常。

我使用Redux DevTools，也使用节点环境在开发和生产模式之间切换。

显然，不提供任何保修。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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')
)

相关讨论