4

I have a React-Redux App with React-Router and connected-react-router (to be able to change location within redux actions):

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

To change location in redux actions I do this:

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

This works fine, but I encounter a behavior that I do not understand:

When I trigger a location via a redux action, everything works fine. But when I reload a page (= browser refresh) with url /projects then a @@router/LOCATION_CHANGE action to / is dispatched.

And this location change only happens in production mode. In development mode (with react-hot-loader) the url is loaded correctly.

If I replace ConnectedRouter by BrowserRouter from react-router-dom everything is fine in both production and development mode.

On initial render of a route the history object looks like this (as expected):

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

But somehow the ConnectedRouter does a redirect.

Any help most welcome!


Edited: here is the routes code:

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

  ...
];
PeteMeier
  • 521
  • 1
  • 6
  • 18

0 Answers0