4

我有一个带有 React-Router 的 React-Redux 应用程序，并且connected-react-router（能够在 redux 操作中更改位置）：

const main = () => {
  hydrate(
    <AppContainer warnings={false}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Switch>
            {renderRoutes(routes)}
          </Switch>
        </ConnectedRouter>
      </Provider>
    </AppContainer>,
    mountApp
  );
};

要更改 redux 操作中的位置，我这样做：

import { push } from 'connected-react-router';
...
export const gotoProjects = () => {
  return async dispatch => {
    dispatch(push('/projects'));
  };
};

这很好用，但我遇到了我不理解的行为：

当我通过 redux 操作触发位置时，一切正常。但是，当我使用 url 重新加载页面（= 浏览器刷新）时，将调度/projects一个@@router/LOCATION_CHANGE动作。/

而且这种位置变化只发生在production模式中。在development模式 (with react-hot-loader) 中，url 被正确加载。

如果我在和模式下都替换ConnectedRouter为一切都很好。BrowserRouterreact-router-domproductiondevelopment

在路由的初始渲染中，历史对象看起来像这样（如预期的那样）：

{
  "history": {
    "length": 6,
    "action": "POP",
    "location": {
      "pathname": "/projects",
      "search": "",
      "hash": ""
    }
  }
}

但不知何故，ConnectedRouter它做了一个重定向。

欢迎任何帮助！

编辑：这是路线代码：

const routes = [
  {
    path: '/',
    exact: true,
    component: Home,
  },
  {
    path: '/projects',
    exact: true,
    component: Projects,
  },

  ...
];
4

0 回答 0