我有一组非常简单的react组件:
container
list
new
我有一些反应路由器路由,如下所示:
<Route name='products' path='products' handler={ProductsContainer}> <Route name='productNew' path='new' handler={ProductNew} /> <DefaultRoute handler={ProductsList} /> </Route>
以便显示list或form而不显示两者。
form
我想做的是,一旦成功添加了新项目,就让应用程序重新路由到列表。
到目前为止,我的解决方案是.then()在async之后设置a dispatch:
.then()
dispatch
dispatch(actions.addProduct(product) .then(this.transitionTo('products')) )
这是执行此操作的正确方法,还是应该以某种方式触发其他操作以触发路线更改?
如果您不想使用像Redux Router这样的更完整的解决方案,则可以使用Redux History Transitions,它可以让您编写如下代码:
export function login() { return { type: LOGGED_IN, payload: { userId: 123 } meta: { transition: (state, action) => ({ path: `/logged-in/${action.payload.userId}`, query: { some: 'queryParam' }, state: { some: 'state' } }) } }; }
这与您的建议相似,但稍微复杂一点。它仍然在后台使用相同的历史库,因此与React Router兼容。