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,
},
...
];