在当前版本的React Router(v3)中,我可以接受服务器响应并使用它browserHistory.push来转到相应的响应页面.但是,这在v4中不可用,我不确定处理它的适当方法是什么.
在此示例中,使用Redux,在用户提交表单时调用components/app-product-form.jsthis.props.addProduct(props).当服务器返回成功时,用户将进入购物车页面.
// actions/index.js
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/cart'); // no longer in React Router V4
});
}
Run Code Online (Sandbox Code Playgroud)
如何从React Router v4的功能重定向到Cart页面?
到目前为止,我已经阅读了很多关于react-router v4和npm历史库的内容,但似乎没有人帮助我.
我的代码按预期运行,直到它应该导航并在使用history.push()方法更改url时执行简单的重定向.URL正在更改为指定的路由,但不会在按钮上执行重定向.在此先感谢,仍在学习反应路由器......
我想按钮按钮在没有{forceRefresh:true}的情况下进行简单的重定向,然后重新加载整个页面.
import React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory({forceRefresh:true});
export default class Link extends React.Component {
onLogout() {
history.push("/signup");
}
render() {
return(
<div>
<h1>Your Links</h1>
<button onClick={this.onLogout.bind(this)}>Log Out</button>
</div>
)
}
}
Run Code Online (Sandbox Code Playgroud) 我发现没有使用完成react-router-redux路由的唯一工作方法action creator async action是将historyprop从组件传递给action creator并执行:
history.push('routename');
Run Code Online (Sandbox Code Playgroud)
由于BrowserRouter忽略了传递给它的历史道具,因此我们不能将自定义历史对象与browserhistory一起使用.
解决这个问题的最佳方法是什么?
我使用React/Redux开发了一个网站,我使用thunk中间件来调用我的API.我的问题涉及行动后的重定向.
我真的不知道如何以及在哪里可以进行重定向:在我的操作中,在reducer中,在我的组件中,......?
我的动作如下:
export function deleteItem(id) {
return {
[CALL_API]: {
endpoint: `item/${id}`,
method: 'DELETE',
types: [DELETE_ITEM_REQUEST, DELETE_ITEM_SUCCESS, DELETE_ITEM_FAILURE]
},
id
};
}
Run Code Online (Sandbox Code Playgroud)
react-redux 已经在我的网站上实现,我知道我可以如下所示,但如果请求失败,我不想重定向使用:
router.push('/items');
Run Code Online (Sandbox Code Playgroud)
谢谢!