在当前版本的React Router (v3)中，我可以接受服务器响应并使用browserHistory。点击进入相应的响应页面。但是，这在v4中是不可用的，我不确定处理它的适当方法是什么。
在这个例子中，使用Redux, components/app-product-form.js在用户提交表单时调用this.props. addproduct (props)。当服务器返回成功时，用户将被带到Cart页面。
// 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
});
}
如何从React Router v4的函数重定向到购物车页面?
我可以通过使用bind()来实现这一点。我想点击索引中的一个按钮。Jsx，向服务器发布一些数据，评估响应，并重定向到success.jsx。以下是我的计算方法……
index.jsx:
import React, { Component } from "react"
import { postData } from "../../scripts/request"
class Main extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.postData = postData.bind(this)
}
handleClick() {
const data = {
"first_name": "Test",
"last_name": "Guy",
"email": "test@test.com"
}
this.postData("person", data)
}
render() {
return (
<div className="Main">
<button onClick={this.handleClick}>Test Post</button>
</div>
)
}
}
export default Main
request.js:
import { post } from "./fetch"
export const postData = function(url, data) {
// post is a fetch() in another script...
post(url, data)
.then((result) => {
if (result.status === "ok") {
this.props.history.push("/success")
}
})
}
success.jsx:
import React from "react"
const Success = () => {
return (
<div className="Success">
Hey cool, got it.
</div>
)
}
export default Success
通过在index中绑定这个到postData。jsx，我能够访问this.props.history在request.js…那么我就可以在不同的组件中重用这个函数，只是要确保我记得包含这个。构造函数()中的postData = postData.bind(this)。
根据React Router v4文档- Redux深度集成会话
深度整合需要:
“能够通过调度操作进行导航”
然而，他们推荐这种方法作为“深度集成”的替代方案:
“你可以将提供给路由组件的历史对象传递给你的操作，而不是分派操作来导航。”
所以你可以用withRouter高阶组件来包装你的组件:
export default withthrouter (connect(null， {actionCreatorName})(ReactComponent));
它将历史API传递给道具。你可以调用动作创建者传递历史作为参数。例如，在你的ReactComponent中:
onClick={() => {
this.props.actionCreatorName(
this.props.history,
otherParams
);
}}
然后，在actions/index.js中:
export function actionCreatorName(history, param) {
return dispatch => {
dispatch({
type: SOME_ACTION,
payload: param.data
});
history.push("/path");
};
}
这是我的hack(这是我的根级文件，其中混合了一些redux -尽管我没有使用react-router-redux):
const store = configureStore()
const customHistory = createBrowserHistory({
basename: config.urlBasename || ''
})
ReactDOM.render(
<Provider store={store}>
<Router history={customHistory}>
<Route component={({history}) => {
window.appHistory = history
return (
<App />
)
}}/>
</Router>
</Provider>,
document.getElementById('root')
)
然后，我可以在任何我想要的地方使用window.appHistory.push()(例如，在我的redux商店函数/ thacks /sagas等)，我希望我可以只使用window.customHistory.push()，但出于某种原因，react-router似乎从未更新，即使url发生了变化。但是这样我就有了react-router使用的EXACT实例。我不喜欢把东西放在全球范围内，这是我做过的为数不多的事情之一。但在我看来，这比我见过的任何其他选择都要好。
我再提供一个解决方案，以防它对其他人有用。
我有一个history.js文件，其中我有以下内容:
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history
接下来，在我定义路由器的根目录上，我使用以下命令:
import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'
export default class Root extends React.Component {
render() {
return (
<Provider store={store}>
<Router history={history}>
<Switch>
...
</Switch>
</Router>
</Provider>
)
}
}
最后，在我的actions.js中，我导入历史并使用pushLater
import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)
这样，我可以在API调用之后推送到新的操作。
希望能有所帮助!
使用回调。这对我很管用!
export function addProduct(props, callback) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
callback();
});
}
在组件中，你只需要添加回调
this.props.addProduct(props, () => this.props.history.push('/cart'))
