react点击按钮跳转页面

AaronYuan
  • 1.5k

刚刚接触react,之前的项目用的vue框架 ,想学习下react框架 ,这个项目就用react写了 ,现在遇到页面跳转的问题

import { routerRedux, Route, Switch } from 'dva/router';

<div className={styles.buttonList}>
  <Button icon="plus" size="large">
    <Route path="/pages/Create/AddPlane" component='./create/add_plane'>添加机票 </Route>
  </Button>
  <Button type="primary" size="large">
    <Route path="/pages/Create/HotelList" component='./create/hotel_list'>下一步</Route>
  </Button>
</div>

这样不行。。。

在按钮里面写个方法 在方法里面写跳转路由的话怎么写呢???

<div className={styles.buttonList}>
  <Button icon="plus" size="large" onClick={addPlane}>
    添加机票
  </Button>
  <Button type="primary" size="large" onClick={nextStep}>
    下一步
  </Button>
</div>
function addPlane() {
  console.log('添加机票');
}

function nextStep() {
  console.log('下一步');
}
回复
阅读 24.3k
2 个回答

你还要在路由里配置下路径1和2要调转的页面。
例如:

<Link to="/aboutUs">
    关于我们
    <span> </span>
</Link>

就要在main.js里配置下路由

import React from 'react'
import ReactDOM, {render} from 'react-dom'
import 'antd/dist/antd.css'
import { Router, Route, hashHistory, browserHistory, Redirect } from 'react-router'
**import AboutUs from '../components/JCWebsite/aboutUs'**

render(<Router history={hashHistory}>
        **<Route path="aboutUs" component={AboutUs} />**
    </Router>, document.getElementById('root')
)

配置里的入口文件,比如我的:
图片描述

刚好今天有写到点击按钮跳转的
只要更改location下的pathname就可以了
如图

图片描述

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏