城市列表（一）-顶部导航——回退的三种写法-this.props.history.push(‘home‘) & goBack() & go(-1)

城市列表（一）-顶部导航——回退的三种写法-this.props.history.push(’/home’) & goBack() & go(-1)

顶部导航

• 使用antd导航组件NavBar

  https://mobile.ant.design/components/nav-bar-cn/

Index/index.js

<NavBar
  mode="light"
  icon={<Icon type="left" />}
  onLeftClick={() => {
    this.props.history.push('/home')
  }}
>
  城市选择
</NavBar>
//----------现用-----------
        {/* 顶部导航栏 */}
            <NavBar
          className='navbar'
          mode="light"
          leftContent={<Icon type='left' size='lg'/>}
          onLeftClick={() => {
            // 点击时跳转到选择城市的页面--三种写法
            // this.props.history.push('/home')
            // this.props.history.goBack()
            this.props.history.go(-1)
          }}
        >选择城市</NavBar>

效果

实例

第一步：src下新建文件夹City，其下新建文件index.js

初始化界面

第二步：src/App.js中进行引入

// 导入路由相关组件
import Home from './views/Home/index.js'
import Login from './views/Login/index.js'
import City from './views/City/index.js'
import Test from './views/Test/index.js'

第三步：主页src/Index/index.js进行点击，实现城市界面跳转

   {/* 顶部导航栏 */}
        <NavBar
          mode="dark"
          leftContent={this.state.currentCity}
          onLeftClick={() => {
            // 点击时跳转到选择城市的页面
            this.props.history.push('/city')
          }}
          rightContent={[
            <Icon onClick={() => {console.log('right')}} key="0" type="search" style={{ marginRight: '16px' }} />
          ]}
        >首页</NavBar>

第四步：打开界面效果