react的路由版本v5.2.0+Ant Design Mobile组件版本v5.0.0

TabBar组件：

  import React,{ FC } from 'react'
  import {NavBar, TabBar} from 'antd-mobile'
  import {
    Route,
    Switch,
    useHistory,
    useLocation,
    Redirect} from 'react-router-dom'
  import {BrowserRouter as Router} from 'react-router-dom'
  import News from '../News'
  import Index from '../Index'
  import HouseList from '../HouseList'
  import Profile from '../Profile'
  import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'
  import  './demo2.css'

  const Bottom: FC = (props) => {
    const history = useHistory()
    const location = useLocation()
    const { pathname } = location
      

    const setRouteActive = (value: string) => {
      props.getMsg(value)
      history.push(value)

    }

    const tabs = [
      {
        key: '/home/index',
        title: '首页',
        icon: <i className="iconfont icon-ind"/>,
      },
      {
        key: '/home/houseList',
        title: '找房',
        icon: <i className="iconfont icon-findHouse"/>,
      },
      {
        key: '/home/news',
        title: '资讯',
        icon: <i className="iconfont icon-infom"/>,
      },
      {
        key: '/home/profile',
        title: '个人中心',
        icon: <i className="iconfont icon-my"/>,
      },
    ]

    return (
      <TabBar activeKey={props.pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    )
  }

 export default class Home extends React.Component{

   getName=(msg)=>{   
     console.log('父传子',msg)
     this.setState({
      pathname:msg
    })  
     console.log('pathname',this.props.location.pathname)
  }

  constructor(props) {
      super(props);
     
      this.state = {
         pathname:this.props.location.pathname
      };
    }
      render(){

          return (
             
                <div className="app">
                  <div className="top">
                    <NavBar>配合路由使用</NavBar>
                  </div>
                  <div className="body" key={this.state.pathname}>
                <Router initialEntries={['/home']}>
                  <Switch>
                      <Route path='/home/index' component={Index}>
                       
                      </Route>
                      <Route path='/home/houseList' component={HouseList}>

                      </Route>
                      <Route path='/home/news' component={News}>

                      </Route>
                      <Route path='/home/profile' component={Profile}>

                      </Route>
                  <Redirect to="/home/index"/>
                </Switch>
                </Router>

                  </div>
                  <div className="bottom">
                    <Bottom pathname={this.state.pathname} getMsg={this.getName}/>
                  </div>
                </div>
              
          )
      }
  }

Swiper组件：

import React from 'react'
import axios from 'axios'
import { Button, Space, Swiper, Toast } from 'antd-mobile'

import  './demo1.css'

const baseUrl="http://localhost:8080"
let items = (props)=>{
    return(
          props.map((swiperItem, swiperIndex) => (
          <Swiper.Item key={swiperIndex}>
            <div
              className="content"
              onClick={() => {
                Toast.show(`你点击了卡片 ${swiperIndex + 1}`)
              }}
            >
              <img src={baseUrl+swiperItem.imgSrc}/>
            </div>
          </Swiper.Item>
        ))
    )
}
export default class News extends React.Component{

  state={
       swiper:[]
  }
    async getSwipers(){
        const res=await axios.get('http://localhost:8080/home/swiper')
        console.log('res',res)
        this.setState({
          swiper:res.data.body,
        })
        console.log('swiper',this.state.swiper)
        this.colors=this.state.swiper

    }
    componentDidMount(){
        this.getSwipers()
    }
    
    render(){
        return (
        <div className="swiperPosition">          
            <Swiper autoplay loop >
             {items(this.state.swiper)}
            </Swiper>             
         </div>
          
        )
    } 
}