类组件内的 react-router-dom useParams()

Question

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

我的路由看起来像/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

您可以使用withRouter 来完成此操作。只需将导出的分类组件包装在withRouter 中，然后您可以使用this.props.match.params.id 来获取参数，而不是使用useParams()。您还可以使用withRouter 获取任何location、match 或history 信息。都是在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 2

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

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 3

You can not call a hook 例如来自 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>

那么你就可以从你的 react 组件中的 props 中获取 id

this.props.taskId

Answer 4

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

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

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

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

Answer 5

React Route v5

可以使用withRouter 和queryString 将查询参数作为JSON 读取和处理，如下所示：

import React from "react";
import { withRouter } from "react-router";
import queryString from 'query-string';
    
class MyComponent extends React.Component {
    componentDidMount() {
        const params = queryString.parse(this.props.location.search);
        console.log('Do something with it', params);
    }

    render() {
        return <div>Hi!</div>;
    }
}

export default withRouter(MyComponent);

Answer 6

在 react-router-dom v6 中，没有诸如 withRouter 之类的钩子，因此我的建议是将基于类的组件转换为功能组件以使用 useParams 挂在你的组件中。

Answer 7

React Route v6

我的朋友们，我试图在课堂上使用，但我没有找到任何关于它的文档。因此，经过数小时的搜索和努力，这就是（功能）。现在（即当我写这篇文章时）关于 v6 的资源有限。但是

这里我使用的是 useState、useEffect、useParams、axios。

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

const Post = () => {
    let { post_id } = useParams();
    const [posts, setPosts] = useState({ post: null, countSecrets: 0, ui: '' });

    useEffect(() => {
        if (posts.countSecrets === 0) {
            const doAxe = (a) => {
                axios.get('https://jsonplaceholder.typicode.com/posts/' + post_id)
                    .then((res) => {
                        setPosts(s => ({ ...s, value: res.data }));
                        doUI(res.data)
                        // console.log(res.data)
                    });
            }
            setPosts(s => ({ ...s, countSecrets: s.countSecrets + 1 }));
            doAxe()
        }
    }, [posts, post_id]);
    let doUI = (x) => {
        // console.log('x' + x.title)
        const finalPost = (x !== null) ? (
            <div className="post">
                <h4 className="center">{x.title}</h4>
                <p>{x.body}</p>
            </div>
        ) : (
            <div className="center">Loading posts...</div>
        );
        setPosts(s => ({ ...s, ui: finalPost }));
    }
    return (
        <div className="container">
            {posts.ui}
        </div>
    );
}

export default Post;

注意： 我遇到了 useEffect 循环。我用钥匙阻止了它。

希望：这可能对某人有所帮助！

参考：

• using useParams
• state inside function
• preventing loop from useEffect

Answer 8

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);