React withRouter 和 class 组件路由器 v6 中访问的参数

Question

最近我开始了新项目并将它的库升级到最新的，包括react 。 从 class 组件内的动态路由访问传递的参数时，我遇到了第一个问题。 在过去，为了做到这一点，需要将导出的 class 组件包装在从路由器返回的withRouter function 中。 在文档中，他们说此功能已在v6中删除，如果您需要，可以手动重新创建它docs link 。

我创建了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;
}

接下来我将它添加到我的 class 组件中：

import React, { Component } from 'react';
import withRouter from './with-router';

class Product extends Component {
    render() {
        return (
            <div className="product">...</div>
        );
    }
}

export default withRouter(Product);

它不起作用，出现以下错误：

Compiled with problems:
WARNING in ./src/components/product.jsx 67:15-25
export 'default' (imported as 'withRouter') was not found in './with-router' (module has no exports)

所以看起来他们自己的代码不起作用，也许有人知道如何让它工作？ 另一件事是考虑未来的影响，删除而不替换的功能，如果你需要它 - 重新创建它？ 如果您无论如何都必须手动添加它，为什么要删除它，这对最近的反应没有意义。

• “反应”：“^ 18.2.0”
• “反应-dom”：“^18.2.0”
• “react-router-dom”：“^6.4.4”
• “网络包”：“^5.74.0”
• “webpack-cli”：“^4.10.0”
• “webpack-dev-server”：“^4.11.1”

Answer 1

正如错误指出的那样，您似乎忽略了使用withRouter HOC导出您的自定义。

编译时出现问题：WARNING in./src/components/product.jsx 67:15-25 export 'default' * (imported as 'withRouter') was not found in './with-router' ( module has no exports *)

* 重点是我的

假设您已经共享了完整with-router.jsx文件内容，它缺少默认导出。

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

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();

    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

export default withRouter; // <-- add default export!

所以看起来他们自己的代码不起作用，也许有人知道如何让它工作？

RRD 代码得到了很好的维护和测试，我没有遇到很多关于他们的 React 挂钩的明显问题/错误。

另一件事是考虑未来的影响，删除而不替换的功能，如果你需要它 - 重新创建它？ 如果您无论如何都必须手动添加它，为什么要删除它，这对最近的反应没有意义。

我认为 React 的发展方向确实有意义。

React 明确表示 Function 组件和 React hooks 是 React 的未来（目前），而 Class 组件出于所有意图和目的已被弃用，尽管出于兼容性原因保留它们。 您描述为“删除”的功能，即删除，被新的 React 挂钩所取代，如果您将当前的 RRDv6 组件与旧的 React 代码一起使用，您引用的常见问题解答文档将作为兼容性桥梁提供。 创建这个 HOC 是微不足道的，如果你需要它，但如果主要目标是创建 React function 组件，那么 RRD 没有必要或不希望导出他们自己的withRouter HOC 来鼓励“弃用”的 React 组件编码模式。

这里一个好的通用规则是在旧的 class 组件上使用新的withRouter组件，对于您创建的任何新组件，将它们实现为 React Function 组件并使用 React hooks。 如果您愿意，可以将旧的 class 组件重写/转换为 function 组件，但这基本上是“仅当您确实需要/想要时”，而不是“不要只是为了转换而转换”类型的东西。