react 中怎么实现点击跳转页面? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
react 中实现点击跳转到新页面方法
实现点击跳转到新页面, 可以有两种形式, 一个是本地页面打开, 一个是本地页面不变跳转到新的页面.
(一) 页面点击本地页面打开新页面
引入 ant 的 Button 组件
- <Button style={{backgroundColor:'#F0F2F5'}}
- onClick={()=>{Windows.location.href="https://baidu.com"}}
- className="r-button"
- >
引入 import {Link} from 'react-router-dom'
- <Link to="/new/login/">
- <Button className="e-button" type="primary">
- Back to login page
- </Button>
- </Link>
react-router-dom 中的 Link 可以实现页面跳转, 一般适用于, 点击按钮或其他组件进行页面跳转.
(二) 本地页面不变跳转到新的页面
- <Button style={{backgroundColor:'#F0F2F5'}}
- onClick={this.handle}
- className="last-button"
- >
- handle=()=>{
- const w=Windows.open('about:blank');
- w.location.href="www.baidu.com"
- }
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/17045.html