react点击按钮跳转页面

前提是配好路由

export default class Router extends Component {
  render() {
    return (
      <HashRouter>
        <App>
          <Switch>
            <Route
              path="/"
              render={() => {
                <Switch>
                    <Route path='/alertmanagement' exact component={AlertManagement} />
                    <Redirect to="/welcome" />
                </Switch>
       
              )}
            />
          </Switch>
        </App>
      </HashRouter>
    );
  }
}

  • 1、 使用Link组件
import { Link } from "react-router-dom";
 <Button type="primary">
      <Link to="/alertManagement">返回</Link>
  </Button>
  • 2、使用 this.props.history
<Button type="primary" onClick={this.confirm}>确定</Button>

 confirm = () =>{
    this.props.history.push('/alertManagement')
  }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、基本用法 React Router 安装命令如下。 $ npm install -S react-router...
    sunnyghx阅读 4,599评论 0 6
  • 函数是面向过程的,函数的调用不需要主体,而方法是属于对象的,调用方法需要一个主体-即对象。 npm install...
    Gukson666阅读 518评论 0 3
  • Vue八个生命周期 beforeCreate【创建前】created【创建后】 beforeMount【载入前】 ...
    艾萨克菊花阅读 1,443评论 0 12
  • React-Router v4 1. 设计理念1.1. 动态路由1.2. 嵌套路由1.3. 响应式路由 2. 快速...
    wlszouc阅读 8,715评论 0 14
  • 转载自 阮一峰React Router 使用教程参考React router 中文文档React router 例...
    WittyLu阅读 823评论 0 0

友情链接更多精彩内容