我有一个带有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,
},
...
];