React Router V6自定义withRouter替代方案失效问题求助

我正在将React Router升级至V6版本，该版本已不再支持withRouter，于是实现了一个自定义包装器作为替代，代码如下：

export const withRouter = Component => {
  const Wrapper = props => {
    const navigate = useNavigate();

    return <Component navigate={navigate} {...props} />;
  };

  return Wrapper;
};

使用方式如下：

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Layout)
);

包装器的位置与原项目中withRouter的位置一致，但目前出现错误：

Uncaught Error: [Wrapper] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

我尝试将<Component navigate={navigate} {...props}/>替换为<Route navigate={navigate} {...props}/>，但仍出现相同错误，恳请帮忙解决！

这个错误的核心原因是你把经过withRouter包装后的组件直接作为了<Routes>的子元素，React Router V6强制要求<Routes>的直接子组件必须是<Route>或<React.Fragment>，不能是自定义包装组件。

具体修复步骤： #

1. 调整路由配置的写法 #

不要将包装后的组件直接放在<Routes>内部，而是通过<Route>的element属性引入：

// 路由配置处的代码
<Routes>
  {/* 这里直接使用经过withRouter和connect包装后的Layout组件 */}
  <Route path="/your-target-path" element={<Layout />} />
</Routes>

2. 优化自定义withRouter包装器（可选） #

如果需要给组件注入更多路由相关能力，可以完善包装器，加入常用的路由钩子：

export const withRouter = Component => {
  const Wrapper = props => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();

    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };

  return Wrapper;
};

3. 规范connect与withRouter的顺序（非报错原因，但更合理） #

建议将connect放在withRouter的外层，确保组件能正常获取redux状态和路由钩子：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Layout));

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