React Router 6 函数式组件withRouter 路由属性配置

withRouter为解决开发过程中函数组件路由参数获取问题，之前版本的withRouter是直接可以导入使用的，现在的需要手写

这里使用了hooks，获取路由、参数等相关信息

需要在函数式组件内使用props，用法：

1.需要先使用高阶组件withRouter为组件添加相关属性

2.组件内传入props 参数 

3.组件内部使用props.navigate()       props.params()等用法

下面是具体写法：

withRouter.js

import {
    useParams,
    useLocation,
    useNavigate,
    useSearchParams,
} from "react-router-dom";

export default function withRouter(Component) {
    // 相当于给 MyCard组件添加各种props属性，还添加三个重要的属性params,location,navigate

    return (props) => (
        <Component
            {...props}
            searchParams={useSearchParams()}
            params={useParams()}
            location={useLocation()}
            navigate={useNavigate()}
        />
    );
}
// withRouter(MyCard)让当前组件MyCard可以访问路由信息。

// 用法： 将export default  MyCard 替换为下方内容
// export default withRouteruter(MyCard);

组件内使用 例下方组件 SideMenu.js  ：

import React from 'react'
import { Layout, Menu } from 'antd'
import withRouter from '../withRouter'
import {
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import './index.css'
const { Sider } = Layout


function SideMenu(props) {
  const menuItems = [
    {
      key: '1',
      icon: <UserOutlined />,
      label: 'label 1'
    },
    {
      key: '2',
      icon: <UserOutlined />,
      label: 'label 2'
    },
    
  ]
  const onMenuClick = (e) => {
    props.navigate(e.key)
  };
  return (
    <Sider trigger={null} collapsible collapsed={false}>
      <div className="logo" >test</div>
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['1']}
        items={menuItems}
        onClick={onMenuClick}
      />
    </Sider>
  )
}


export default withRouter(SideMenu)

withRouter 用法很清晰了，这里的函数组件 SideMenu 使用后，组件传递props，

 然后在组件内可以获取到的props内容如下：

 需要的数据是这几个，当然这个 withRouter.js组件是可维护的，需要什么可以继续加

在SideMenu.js内获取到后，点击跳转也是比较常用的，新版本的用法如上述代码：

这里的e.key是菜单组件内部内容，在其他地方使用

页面跳转

props.navigate("/home")

 然后就可以跳转成功了

回退

props.navigate(-1)