好客租房之tabbar(react-router-dom v6)

最近开始学习react，尝试做黑马程序员的react好客租房项目，发现由于发布时间久了，到现在23年，react-router-dom已经升级到v6。这个改动比较大，让我有些头疼，经过不懈的百度，终于搞定了，所以在这里记录一下。

版本：

    "antd-mobile": "^5.31.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.1",

代码仅供参考

import React from 'react';
import { Badge, TabBar } from 'antd-mobile';
import { useLocation, useNavigate } from 'react-router'
import '../../styles/tabbar.scss'

export default function Tabbar() {
  const tabs = [
    {
      key: '',
      title: '首页',
      icon: <i className="iconfont icon-ind" />,
      badge: Badge.dot,
    },
    {
      key: 'houselist',
      title: '找房',
      icon: <i className="iconfont icon-findHouse" />,
      badge: '5',
    },
    {
      key: 'news',
      title: '资讯',
      icon: <i className="iconfont icon-infom" />,
      badge: '99+',
    },
    {
      key: 'profile',
      title: '我的',
      icon: <i className="iconfont icon-my" />
    },
  ];
  
  const location = useLocation() //useLocation 钩子返回当前URL的 location 对象
  const navigate = useNavigate() //`useNavigate`取代了原先版本中的 useHistory，进行路由跳转
  const setActive = (e) => {
    navigate('/home/' + e)
  }
  // console.log(location.pathname)
  return (<div className='home'>

    <TabBar onChange={setActive}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      )
      )}
    </TabBar>

  </div>
  );
};

.home {
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.adm-tab-bar-item-active{
  color: rgb(118, 194, 2) !important;
}