react 路由6.2版本封装一个withRouter的高阶函数

最新推荐文章于 2023-10-25 13:28:14 发布

原创最新推荐文章于 2023-10-25 13:28:14 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

本文介绍了一个React中用于封装高阶组件以处理路由逻辑的方法。通过使用`useParams`、`useLocation`和`useNavigate`等Hook，实现了一个可以被其他组件复用的路由功能增强组件。

import React from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";
//高阶组件
const withRouter = (Com) => {
  function WithFun(props) {
    const params = useParams();     // 接受参数的作用
    const location = useLocation(); // 跳转
    const navigate = useNavigate(); // 替换以前版本的history

    return <Com {...props} router={{ params, location, navigate }} />;
  }
  return WithFun;
};
export default withRouter;