Question

我有一个带有React-Router和connected-react-router的React-Redux应用程序（以便能够在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动作触发位置时，一切正常。但是，当我使用网址/projects重新加载页面（=浏览器刷新）时，就会向@@router/LOCATION_CHANGE派发一个/动作。

此位置更改仅在production模式下发生。在development模式下（与react-hot-loader一起使用），URL已正确加载。

如果我将ConnectedRouter中的BrowserRouter替换为react-router-dom，则在production和development模式下一切正常。

在路线的初始呈现中，历史记录对象如下所示（预期）：

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

但是以某种方式ConnectedRouter进行重定向。

最欢迎任何帮助！

编辑：这是路线代码：

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

  ...
];

在初始渲染时，ConnectedRouter重定向到页面上重新加载时的“ /”

0 个答案: