javascript 在类组件router v6中访问Router和参数

dbf7pr2w 于 2022-12-10 发布在 Java

关注(0)|答案(1)|浏览(236)

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

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

“React”：“^18.2.0”
“React域”：“^18.2.0”
“React路由器域”：“^6.4.4”
“网页套件”：“^5.74.0”
“webpack-cli”：“^4.10.0版本”
“webpack开发服务器”：“^4.11.1”

JavaScript

来源：https://stackoverflow.com/questions/74742528/react-withrouter-and-params-accessing-in-class-components-router-v6

1条答案

按热度按时间

iqih9akk1#

正如错误所指出的，您似乎忽略了***导出*您的自定义withRouter HOC。
编译时出现问题：./src/components/product.jsx 67中的警告：15-25导出*在.“/with-router”中找不到“默认”（作为“withRouter”导入）（模块没有导出）

重点是我

假设您已经共享了完整的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的方向是有意义的。
React已经清楚地表明，函数组件和React钩子是React的未来（现在 ）并且类组件，无论出于什么意图和目的，都是不赞成的，尽管出于兼容性的原因，它们被保留了下来。你描述为被“删除”的功能，即删除，***被替换...被新的React钩子，并且如果您使用的是带有较旧React代码的当前RRDv 6组件，那么您引用的FAQ文档将作为兼容性桥梁提供。但是，如果主要目标是创建使用React钩子的React功能组件，则RRD不需要或不希望导出其自己的withRouter HOC，这会鼓励“React组件编码模式。
这里一个很好的通用规则是在旧的类组件上使用新的withRouter组件，对于任何 * 新 * 创建的组件，将它们实现为React函数组件并使用React钩子。如果 * 需要 *，可以将旧的类组件重写/转换为函数组件，但这基本上是一个“只有当你真的需要/想要”，而不是一个“不要只是为了转换而转换”类型的事情。

赞(0）回复(0）举报 2022-12-10

我来回答

javascript 在类组件router v6中访问Router和参数

1条答案

相关问题

热门标签

最新问答