Javascript 新版本&x27；我不能和redux一起工作

也许这个问题是因为react路由器的新版本还有几天的时间，但我一直在阅读关于这个问题的文章，我想澄清一下到底发生了什么。我使用的是react路由器的最新版本，我想通过redux进行路由。我遵循redux路由器模块文档中列出的步骤，但在实现时收到此错误：（我知道问题出在服务器渲染中）

以下是我的代码（重要部分）：

server.js

import { Provider } from 'react-redux';
import store from './store';

lisaApp.get('*', function (req, res) {
  const context = {};

  const html = renderToString(
    <Provider store={store}>
      <MuiThemeProvider muiTheme={getMuiTheme()}>
        <StaticRouter location={req.url} context={context}>
          <Routes />
        </StaticRouter>
      </MuiThemeProvider>
    </Provider>,
  );

  res.setHeader('Content-Type', 'text/html');

  if (context.url) {
    res.writeHead(301, {
      Location: context.url,
    });
    res.end();
  }

  res.write(
    renderToStaticMarkup(<Layout title={req.title} content={html} />),
  );

  res.end();
}

import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { BrowserRouter } from 'react-router-dom';
import store from './store';

render((
  <Provider store={store}>
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <BrowserRouter history={createHistory()}>
        <Routes />
      </BrowserRouter>
    </MuiThemeProvider>
  </Provider>),
  document.getElementById('app'));

import { createStore, combineReducers, applyMiddleware } from 'redux'
import createHistory from 'history/createBrowserHistory'
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
import thunk from 'redux-thunk';

import reducer from './reducer';

const history = createHistory()
const middlewareHistory = routerMiddleware(history)

const store = createStore(
  combineReducers({
    reducer,
    router: routerReducer
  }),
  applyMiddleware(
    middlewareHistory,   
    thunk
  )
);

export default store;

component.js（调度）

显然，从未调用来自我的组件的调度。谁能告诉我哪里错了？或者这个功能还没有在react router redux模块中实现？提前感谢。

请使用react router redux库中的ConnectedRouter，而不是BrowserRouter：

import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter } from 'react-router-redux';
import store from './store';

render((
    <Provider store={store}>
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <ConnectedRouter history={createHistory()}>
                <Routes />
            </ConnectedRouter>
        </MuiThemeProvider>
    </Provider>),
    document.getElementById('app'));

从'react redux'导入{Provider}；
从“历史记录/createBrowserHistory”导入createHistory；
从“react router redux”导入{ConnectedRouter}；
从“./store”导入存储；
渲染((
),
document.getElementById（'app'）；

几天前我遇到了同样的问题。在BrowserRouter中，手动创建并传递browserHistory对象。然后，无论何时需要访问历史对象，都可以导入它，就像它发生在store.js中一样，它在服务器和客户端之间共享。但是，服务器上没有DOM，因此会出现错误

我通过不手动创建历史对象解决了这个问题，这是不需要的，因为您使用的是BrowserRouter。如文件所述，浏览器路由器为：

使用HTML5历史API（pushState、replaceState和popstate事件）保持UI与URL同步的

不必在需要时手动导入历史记录，只需使用方便的withRouter高阶组件即可。这样，在你的道具中，你不仅可以看到历史，还可以看到最近的比赛。阅读更多关于它的信息

关于派遣的最后一点，你是对的，它没有被呼叫。无论何时通过react-redux的连接创建组件，请记住使用withRouter高阶组件包装它。阅读更多关于它的信息

我相信以上内容将解决您的问题。如果你愿意，我可以分享一个工作示例，但我的解决方案与你的非常相似，除了我上面的评论

---

我希望这能有所帮助。

这对我来说很有效

我使用了“react router dom”库中的ConnectRouter。除此之外，我还使用了“react router dom”库中的BrowserRouter**现在我可以愉快地使用React+Redux+路由

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from "react-router-dom";
    import { Provider } from "react-redux";
    import { createStore } from "redux";
    import rootReducer from "./reducers";
    import App from "./App";
    import { connectRouter } from "connected-react-router";
    import createHistory from "history/createBrowserHistory";
    export const history = createHistory();
    const store = createStore(connectRouter(history)(rootReducer));
    ReactDOM.render(
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>,
      document.getElementById("root")
    );

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“react redux”导入{Provider}；
从“redux”导入{createStore}；
从“/reducers”导入rootReducer；
从“/App”导入应用程序；
从“已连接路由器”导入{connectRouter}；
从“历史记录/createBrowserHistory”导入createHistory；
export const history=createHistory（）；
const store=createStore（connectRouter（history）（rootReducer））；
ReactDOM.render(
,
document.getElementById（“根”）
);

我希望这也能对你起作用

---

快乐编码

嗨，Patrick，首先我想感谢你的回答，我尝试了你的建议，但没有效果，我想是因为问题是关于服务器渲染的，因为客户端很好。这个问题是因为客户端和服务器之间的“存储”是相同的。啊，好吧，我错过了你问题的一部分，你说问题与服务器上的渲染有关。在服务器上渲染时，应使用StaticRouter。我有一个类似的设置，在服务器端和客户端使用不同的脚本进行初始化。服务器端使用StaticRouter，客户端使用ConnectedRouter。是的，正如您在我的代码中看到的，我在服务器端使用StaticRouter，但提供程序中的“存储”由服务器端和客户端共享，因此，在编译应用程序时会显示错误。您有新版本的react router.dom的实现吗？为了避免错误，我修复了这个问题。我使用历史库中的createBrowserHistory模块和同一个库中的createMemoryHistory模块。但是现在，调度没有执行“推送”操作，但是我知道它被调用了，因为记录器向我显示了调用的数据

import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter } from 'react-router-redux';
import store from './store';

render((
    <Provider store={store}>
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <ConnectedRouter history={createHistory()}>
                <Routes />
            </ConnectedRouter>
        </MuiThemeProvider>
    </Provider>),
    document.getElementById('app'));

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from "react-router-dom";
    import { Provider } from "react-redux";
    import { createStore } from "redux";
    import rootReducer from "./reducers";
    import App from "./App";
    import { connectRouter } from "connected-react-router";
    import createHistory from "history/createBrowserHistory";
    export const history = createHistory();
    const store = createStore(connectRouter(history)(rootReducer));
    ReactDOM.render(
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>,
      document.getElementById("root")
    );