如何在ES7函数组件中使用withRouter包裹DetailProducts组件

withRouter 是 react-router-dom v5 版本提供的高阶组件，用于给非路由直接渲染的组件注入路由相关属性（history、location、match），包裹方式如下：

import React from "react";
import details from "../../CSS/ProductsCss/details.css";
import { withRouter } from "react-router-dom";

function DetailProducts(props) {
  // 包裹后可以直接从props中获取路由相关属性，比如：
  // console.log(props.history)  路由跳转方法
  // console.log(props.location) 当前页面路径、查询参数等信息
  // console.log(props.match)    动态路由参数匹配信息
  return (
    <div className="single-product">
      
    </div>
  );
}

// 导出时用withRouter包裹组件即可
export default withRouter(DetailProducts);

注意事项 #

• 如果你使用的是 react-router-dom v6 及以上版本，withRouter 已经被官方移除，不需要再用高阶组件包裹，直接在函数组件内调用对应路由Hook即可获取需要的属性：
  • 替代history使用 useNavigate Hook
  • 替代location使用 useLocation Hook
  • 替代match.params使用 useParams Hook
    v6版本参考写法：

  import React from "react";
  import details from "../../CSS/ProductsCss/details.css";
  import { useNavigate, useLocation, useParams } from "react-router-dom";
  
  export default function DetailProducts() {
    const navigate = useNavigate() // 等价于v5版本的history
    const location = useLocation() // 等价于v5版本的props.location
    const params = useParams() // 等价于v5版本的props.match.params
    return (
      <div className="single-product">
        
      </div>
    );
  }
  

内容的提问来源于stack exchange，提问作者Lincon