【无标题】

react router v6 路由传参（withRouter已被弃用）

项目场景：

项目场景：千锋React项目实战 全球新闻发布管理系统

---

问题描述

例如：v5版本时 当动态跳转页面时，需要两个页面进行路由传参，由于只有以 Route 为父组件的才可以拿到props里的所有属性，引入高阶组件withRoute

v6版本获取路由参数，withRouter已经在react-router-dom v6版本中废弃，取而代之的是useNavigate
import { useNavigate } from “react-router-dom”;
const navigate = useNavigate();

使用useParams接收路由params参数
import {useParams} from “react-router-dom”;
const {id} = useParams();

使用useSearchParams获取search参数
import {useSearchParams} from “react-router-dom”
const [searchParams] = useSearchParams();
const id = searchParams.get(“id”);

使用useLocation获取state参数
import {useLocation} from “react-router-dom”;
const location = useLocation();
const {id} = location.state;

//侧边栏全部代码如下

function SideMenu(props) {
 
  const [menu, setMenu] = useState([]);
  const checkPagePermission = (item) => {
    return item.pagepermisson && rights.includes(item.key);
  };
  //v6 :添加如下两行
  const navigate = useNavigate();//获取params参数
  const location = useLocation();//获取location参数
 
  const renderMenu = (menuList) => {
    return menuList.map((item) => {
      if (item.children?.length > 0 && checkPagePermission(item)) {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {renderMenu(item.children)}
          </SubMenu>
        );
      }
      return (
        checkPagePermission(item) && (
          <Menu.Item
            key={item.key}
            icon={item.icon}
            onClick={() => {
            //v5
             // props.history.push(item.key);
            //v6
              navigate(item.key);
            }}
          >
            {item.title}
          </Menu.Item>
        )
      );
    });
  };
  return (
    <Sider trigger={null} collapsible collapsed={false}>
        <div className="logo">全球新闻发布管理系统</div>
        <Menu
            theme="dark"
            mode="inline"
            //v5版本
            //selectedKeys={[props.location.pathname]}
            //v6 更改为：
            selectedKeys={[location.pathname]}
            
          >
            {renderMenu(menu)}
          </Menu>
        </div>
      </div>
    </Sider>
  );
}
//v5:使用withRouter高阶组件包装低阶组件，生成高阶组件，生成的路由组件的props会有相应的属性提供使用
//export default withRouter(SideMenu);

//v6
export default SideMenu;

---

v6官方文档：

https://reactrouter.com/docs/en/v6

---

参考文章：https://coding.imooc.com/learn/questiondetail/EgyveY0Ld7QYBk7V.html