React Router v6类组件中withRouter自定义实现报错求助

一、编译报错解决方法 #

你遇到的报错是因为with-router.jsx文件中没有导出withRouter函数，官方示例代码遗漏了导出语句。只需在文件末尾添加导出语句即可修复：

修改后的with-router.jsx代码：

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

function withRouter(Component) {
    function ComponentWithRouterProp(props) {
        let location = useLocation();
        let navigate = useNavigate();
        let params = useParams();
        return (
            <Component
                {...props}
                router={{ location, navigate, params }}
            />
        );
    }

    return ComponentWithRouterProp;
}

// 添加导出语句
export default withRouter;

修复后，类组件中可通过this.props.router.params获取动态路由参数，示例如下：

class Product extends Component {
    render() {
        // 获取并打印动态路由参数
        console.log(this.props.router.params);
        return (
            <div className="product">...</div>
        );
    }
}

二、关于withRouter移除的设计合理性 #

React Router v6移除withRouter是基于以下核心考量：

• 优先函数组件与Hooks：v6全面转向函数组件优先的设计，useParams、useNavigate等Hooks能更直接地获取路由信息，高阶组件模式（withRouter）显得冗余，移除它是为了引导开发者使用更现代的React写法。
• 按需定制，减少冗余：手动实现withRouter可让你根据组件实际需求传递路由属性，比如只传params而不需要location或navigate，避免不必要的props传递，让组件更轻量化。
• 精简库体积：将这类非核心的适配功能交给开发者按需实现，能有效减少React Router库本身的体积，提升整体加载性能。

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