reactjs - 单击后如何获取登录按钮以导航到新页面。我已经下载并使用了 React 路由器 dom
问题描述
嗨,我想知道如何导航到新页面。请查看我的代码并尽你所能提供帮助。我正在使用的是 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 方法进行导航。任何帮助表示赞赏!
解决方案
用这个替换你的 onClick 函数
onClick = () => {
this.props.history.push("/");
};
还将您的组件包装在 withRouter 高阶组件中。
export default withRouter(Login);
推荐阅读
- python - 基于一些数据使用节点和顶点构造图
- asp.net-mvc - 如果我编辑一个 EDMX 文件,它是否会更改除了它本身和它的设计器文件之外的任何文件?
- python-3.x - 使用 PyMC3 和大型数据集进行贝叶斯线性回归 - 括号嵌套级别超过最大值且性能缓慢
- javascript - 在 React 组件中保持基本状态
- python - 使用 matplotlib.pyplot 绘制多个字典值
- firebase - 使用 Firestore 保存和查询大列表
- amazon-web-services - AWS 豆茎 | PHP 平台上的 NPM
- c# - 带有可见选项卡的 UWP XAML 菜单弹出窗口
- python-3.x - predict 方法中的 XgBoost validate_features 参数。validate_features 有什么作用?
- python - Python Difflib 模块忽略空格 (HTMLDiff)