reactjs React Router v4 在表单提交时重定向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49738249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Router v4 Redirecting on form submit
提问by Vincent Nguyen
Brand new to react, Attempting to redirect to a "homepage" after clicking submit on a "login" page. Tried to follow the react router tutorial.
全新的反应，在“登录”页面上单击提交后尝试重定向到“主页”。试图按照反应路由器教程。
When I click the submit button on the form and console log the state and fakeAuth.isAuthenticated, they both return true. However, the redirect is not firing.
当我单击表单上的提交按钮并控制台记录状态和 fakeAuth.isAuthenticated 时，它们都返回 true。但是，重定向不会触发。
Login.js
登录.js
class Login extends Component {
constructor(props) {
super(props);
this.state = {
portalId: "",
password: "",
redirectToReferrer: false
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
fakeAuth.authenticate(() => {
this.setState({
portalId: this.refs.portalId.value,
password: this.refs.password.value,
redirectToReferrer: true
})
})
e.preventDefault();
}
render() {
const redirectToReferrer = this.state.redirectToReferrer;
if (redirectToReferrer === true) {
<Redirect to="/home" />
}
Routes.js
路由.js
export const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
this.isAuthenticated = true
setTimeout(cb, 100)
},
signout(cb) {
this.isAuthenticated = false
setTimeout(cb, 100)
}
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={() => (
fakeAuth.isAuthenticated === true
? <Component {...this.props}/>
: <Redirect to="/" />
)}/>
)
export default () => (
<BrowserRouter>
<div>
<Navbar />
<Switch>
<Route path="/" exact component={Login} />
<Route path="/register" exact component={Register} />
<Route path="/home" exact component={Home} />
</Switch>
</div>
</BrowserRouter>
);
回答by Bartek Fryzowicz
You have to return Redirectin render method (otherwise it will not be rendered and as a result redirection will not happen):
你必须Redirect在 render 方法中返回（否则它不会被渲染，因此不会发生重定向）：
render() {
const redirectToReferrer = this.state.redirectToReferrer;
if (redirectToReferrer === true) {
return <Redirect to="/home" />
}
// ... rest of render method code
}
回答by Vincent Nguyen
I am now able to redirect to the "homepage" by swapping out <Redirect to="/home" />with this.props.history.push("/home");using withRouter. Not sure why the first way would not work though.
我现在能够通过交换来重定向到“主页”<Redirect to="/home" />与this.props.history.push("/home");使用withRouter。不知道为什么第一种方法不起作用。
