React withRouter 和 params 在类组件 router v6 中访问答案

【问题标题】：React withRouter and params accessing in class components router v6React withRouter 和 params 在类组件 router v6 中访问
【发布时间】：2022-12-10 13:40:44
【问题描述】：

最近我开始了新项目并将它的库升级到最新的，包括react。从类组件内的动态路由访问传递的参数时，我遇到了第一个问题。在过去，为了做到这一点，需要将导出的类组件包装在路由器返回的 withRouter 函数中。在文档中，他们说此功能已在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;
}

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

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”
“反应域”：“^18.2.0”
“react-router-dom”：“^6.4.4”
“webpack”：“^5.74.0”
“webpack-cli”：“^4.10.0”
“webpack-dev-server”：“^4.11.1”

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

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

编译有问题：WARNING in ./src/components/product.jsx 67:15-25 出口'默认'*（导入为“withRouter”）未在 './with-router' (模块没有出口*)

* 重点是我的

假设您已共享完整的 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 hooks 的 React 函数组件，那么 RRD 没有必要或不希望导出他们自己的 withRouter HOC 来鼓励“弃用”React组件编码模式。

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

【讨论】：