在当前版本的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的函数重定向到购物车页面?
第一步在路由器中包装你的应用程序
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
现在我的整个应用程序都可以访问BrowserRouter。第二步，我导入Route，然后传递这些道具。可能在你的一个主文件里。
import { Route } from "react-router-dom";
//lots of code here
//somewhere in my render function
<Route
exact
path="/" //put what your file path is here
render={props => (
<div>
<NameOfComponent
{...props} //this will pass down your match, history, location objects
/>
</div>
)}
/>
现在如果我在我的组件js文件中运行console.log(this.props)，我应该得到类似这样的东西
{match: {…}, location: {…}, history: {…}, //other stuff }
步骤2访问历史记录对象，修改位置
//lots of code here relating to my whatever request I just ran delete, put so on
this.props.history.push("/") // then put in whatever url you want to go to
另外，我只是一个编程训练营的学生，所以我不是专家，但我知道你也可以使用
window.location = "/" //wherever you want to go
如果我错了，请纠正我，但当我测试出来的时候，它重新加载了整个页面，我认为这击败了使用React的整个意义。
我可以通过使用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-dom 5, Redux 4和BrowserRouter。
我更喜欢基于功能的组件和钩子。
像这样定义组件
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";
const Component = () => {
...
const history = useHistory();
dispatch(myActionCreator(otherValues, history));
};
你的动作创造者紧随其后
const myActionCreator = (otherValues, history) => async (dispatch) => {
...
history.push("/path");
}
当然，如果不需要async，可以使用更简单的动作创建器
您可以在组件外部使用历史方法。试试下面的方法。
首先，使用历史包创建一个历史对象:
// src/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
然后将它包装在<Router>中(请注意，你应该使用import {Router}而不是import {BrowserRouter as Router}):
// src/index.jsx
// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
</ul>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
</div>
</Router>
</Provider>,
document.getElementById('root'),
);
从任何地方更改当前位置，例如:
// src/actions/userActionCreators.js
// ...
import history from '../history';
export function login(credentials) {
return function (dispatch) {
return loginRemotely(credentials)
.then((response) => {
// ...
history.push('/');
});
};
}
UPD:你也可以在React Router FAQ中看到一个稍微不同的例子。
