类组件内部的react-router-dom useParams（）

Question

我正在尝试基于应获取URL参数（id）的react-router-dom路由加载详细信息视图，并使用该参数进一步填充组件。

我的路线看起来很像，/task/:id并且我的组件加载正常，直到我尝试像这样从URL抓取：id为止：

    import React from "react";
    import { useParams } from "react-router-dom";

    class TaskDetail extends React.Component {
        componentDidMount() {
            let { id } = useParams();
            this.fetchData(id);
        }

        fetchData = id => {
            // ...
        };

        render() {
            return <div>Yo</div>;
        }
    }

export default TaskDetail;

这会触发以下错误，我不确定在哪里正确实现useParams（）。

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

该文档仅显示基于功能组件的示例，而不是基于类的示例。

感谢您的帮助，我是新来的人。

Answer 1

import React, { Component } from "react";
import { useParams } from "react-router-dom";

function withParams(Component) {
  return props => <Component {...props} params={useParams()} />;
}


class TaskDetail extends React.Component {
    componentDidMount() {
        let { id } = this.props.params;
        this.fetchData(id);
    }

    fetchData = id => {
        // ...
    };

    render() {
        return <div>Yo</div>;
    }
}

export default withParams(TaskDetail);

Answer 2

由于钩子不适用于基于类的组件，因此您可以将其包装在函数中并传递属性：

class TaskDetail extends React.Component {
    componentDidMount() {
        const { id } = this.props.params;
        // ...
    }
}

export default (props) => (
    <TaskDetail
        {...props}
        params={useParams()}
    />
);

但是，就像 @michael-mayo 所说，我希望这就是withRouter已经在执行的操作。

Answer 3

参数通过匹配对象上的道具传递。

props.match.params.yourParams

来源：https : //redux.js.org/advanced/usage-with-react-router

这是文档中破坏参数中的道具的示例。

const App = ({ match: { params } }) => {
  return (
    <div>
      <AddTodo />
      <VisibleTodoList filter={params.filter || 'SHOW_ALL'} />
      <Footer />
    </div>
  )
}

Answer 4

您可以withRouter用来完成此任务。只需将导出的分类组件包装在其中withRouter，然后就可以使用this.props.match.params.id来获取参数，而不必使用useParams()。您还可以得到任何location，match或history通过使用信息withRouter。他们都被传进来this.props

使用您的示例，它看起来像这样：

    import React from "react";
    import { withRouter } from "react-router";

    class TaskDetail extends React.Component {
        componentDidMount() {
            const id = this.props.match.params.id;
            this.fetchData(id);
        }

        fetchData = id => {
            // ...
        };

        render() {
            return <div>Yo</div>;
        }
    }

export default withRouter(TaskDetail);

就那么简单！

Answer 5

您不能从 React.Component调用诸如“useParams()”之类的钩子。

如果您想使用钩子并拥有现有的react.component，最简单的方法是创建一个函数，然后从该函数调用React.Component并传递参数。

import React from 'react';
import useParams from "react-router-dom";

import TaskDetail from './TaskDetail';

function GetId() {

    const { id } = useParams();
    console.log(id);

    return (
        <div>
            <TaskDetail taskId={id} />
        </div>
    );
}

export default GetId;

你的切换路线仍然是这样的

<Switch>
  <Route path="/task/:id" component={GetId} />
</Switch>

然后你就可以从你的反应组件中的 props 中获取 id

this.props.taskId

Answer 6

在react-router-dom-v6中，您可以轻松地在功能组件中使用useParams()，但是当它到达类组件时，您必须创建HOC（高阶组件），因为钩子不支持类组件：

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

export const withRouter = (WrappedComponent) => (props) => {
  const params = useParams();
  const navigate = useNavigate();

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

然后从 HOC 导出您的组件并将您的组件作为参数提供。像下面这样：

export default withRouter(YourComponentName);

之后，您可以轻松访问 url id，this.props.params.id并且可以使用导航到其他组件this.props.navigate("/YourPath")