React-Router-Redux：在“react-router-redux”中找不到导出“syncHistoryWithStore”

Posted 2023-02-21

【中文标题】React-Router-Redux：在“react-router-redux”中找不到导出“syncHistoryWithStore”

【英文标题】：React-Router-Redux: export 'syncHistoryWithStore' was not found in 'react-router-redux'

【发布时间】：2017-09-28 23:56:42

【问题描述】：

我一直在尝试将 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 的问题。

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",

【问题讨论】：

你的 react 路由器版本是什么？

抱歉，您一发表评论，我就意识到我忘记了该信息。刚刚将其添加到原始帖子中。

酷，所以我认为您正在查看当前版本的文档/示例，而不是您正在使用的 alpha，我在这里没有看到任何提及该功能 -> @987654322 @

令人困惑，因为 NPM 显示版本为 4.0.8，但它却强行下载 5.0.0。我什至不想要阿尔法。如果 npm 正在下载 alpha，我如何指定获取稳定版本？

好吧，我认为您需要 alpha 才能与当前版本的 react 路由器（您正在使用）一起使用。是的，这令人困惑，react 生态系统的发展速度非常快，这意味着有些部分超过了其他部分 :)

【参考方案1】：

对于遇到相同问题的任何人，我将发布我的工作 index.js 文件（注意：我已将我的自定义组件和 reducer 留在了进一步的指导中）。

我现在不使用syncHistoryWithStore。我使用插件history/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, 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')
)

【讨论】：

最后是什么版本？

这适用于：react-redux：“^5.0.4”，react-router：“^4.1.1”，react-router-dom：“^4.1.1”，react-router -redux: "^5.0.0-alpha.6", (和更新)