连接路由器-如何覆盖和拦截历史记录。推出redux中间件?
发布时间:2022-03-17 14:56:31 513
相关标签:
我已经编写了一个redux中间件来帮助将url参数与redux状态同步。要做到这一点,我使用connected-react-router
库以分派历史操作并监视路由更改(将状态同步到url更改)。
例如,应用程序中有几个参数需要固定(始终存在于url中)租户,账号
我认为对这个中间件的一个很好的补充是允许keepInUrl选项,以确保应用程序中的任何历史更改都会将这些固定参数添加到url中(这样开发人员在执行应用程序时就不必担心它)history.push
新的固定参数不需要我们每次更新history.push
呼叫
为了强制执行固定参数,我使用了以下代码(简化):
// lets say we are currently at the index route before this action '/'
const {type} = action;
if (type === '@@router/LOCATION_CHANGE') {
// route here for example is /dashboard
newSearch = AddFixedParams(search)
// new route here is /dashboard?accountId=1234&tenantId=1
const newAction = {
...action,
payload: {
...action.payload,
location: { ...location, search: newSearch, key: location.key + '1' },
},
};
return next(newAction);
一开始,这似乎很好,它确实可以导航到新的路线。返回时会出现问题——返回到预先修改的url(即/仪表板),而不是预期的索引。
所以我很好奇是否有办法解释这一点,更重要的是,有没有办法绕过这一行为,以这种方式拦截/修改历史?
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报