如何获取登录按钮以在单击后导航到新页面.我已经下载并使用了 React 路由器 dom

Question

嗨，我想知道如何导航到新页面。请查看我的代码并尽你所能提供帮助。我正在使用的是 React 路由器 Dom，它可以工作，但我想将其用作方法谢谢！

import React, {Component} from "react";
import "./App.css";
import {withRouter} from "react-router-dom";
class Login extends Component {

onClick() {
withRouter(({ history }) => (
<div onClick={() => history.push('/')}>
<button>Hello</button>
</div>)
)
alert("Hello");
};
render() {

return(
<div style={{marginTop:-22}}>
<div style={{backgroundImage:"url(https://freeios7.com/download/freeios7.com_apple_wallpaper_peach-grass-blur_iphone4.jpg)", height:900, width:1900}}>
<div style={{display:"flex", flexDirection:"column", alignItems:"center", paddingTop:65}}>
<div style={{display:"flex", flexDirection:"column", alignItems:"flex-end"}}>
</div>
<img src="https://www.moonlight.com.au/wp-content/themes/moonlight-2016/dist/images/moonlight-logo.png"/>
</div>
<div className="login-contents">
<h1>Email</h1>
<input 
className="inputdesign"
placeholder="Enter Email"/>
<h1>Password</h1>
<input
className="inputdesign"
placeholder="Enter Password" />
<div style={{paddingTop:20}}>
<form>
<button onClick={this.onClick} className="loginbutton">Login</button>
</form>
</div>
<div className="loginhelp">
<div>New to Moonlight Cinema? Create Account</div>
<div>Forgot Password?</div>
</div>
</div>
</div>
</div>
)
}
}

export default Login;

我正在尝试使用我的 onClick 方法进行导航。任何帮助表示赞赏！

Answer 1

将你的onClick函数替换为这个

onClick = () => {
this.props.history.push("/");   
};

同时将您的组件包装在 withRouter 高阶组件中。

export default withRouter(Login);