Reac-router-dom useParams () bên trong thành phần lớp

Tôi đang cố tải chế độ xem chi tiết dựa trên tuyến phản ứng bộ định tuyến-bộ định tuyến sẽ lấy tham số URL (id) và sử dụng chế độ đó để tiếp tục điền thành phần.

Tuyến đường của tôi trông như thế /task/:idvà thành phần của tôi tải tốt, cho đến khi tôi cố lấy: id từ URL như vậy:

    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;

Điều này gây ra lỗi sau và tôi không chắc nơi triển khai chính xác useParams ().

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

Các tài liệu chỉ hiển thị các ví dụ dựa trên các thành phần chức năng, không dựa trên lớp.

Cảm ơn sự giúp đỡ của bạn, tôi mới phản ứng.

Bạn có thể sử dụng withRouterđể thực hiện điều này. Chỉ cần bọc thành phần được phân loại đã xuất của bạn bên trong withRoutervà sau đó bạn có thể sử dụng this.props.match.params.idđể lấy các tham số thay vì sử dụng useParams(). Bạn cũng có thể nhận được bất kỳ location, matchhoặc historythông tin bằng cách sử dụng withRouter. Tất cả đều được thông quathis.props

Sử dụng ví dụ của bạn nó sẽ trông như thế này:

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

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

Đơn giản như thế!

Params được truyền qua đạo cụ trên đối tượng trận đấu.

props.match.params.yourParams

nguồn: https://redux.js.org/advified/usage-with-react-router

Dưới đây là một ví dụ từ các tài liệu phá hủy các đạo cụ trong các đối số.

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

Vì các hook không hoạt động với các thành phần dựa trên lớp, bạn có thể bọc nó trong một hàm và chuyển các thuộc tính cùng:

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

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

Nhưng, như @ michael-mayo đã nói, tôi hy vọng đây là những gì withRouterđã được thực hiện.

Bạn không thể gọi một hook như "useParams ()" từ React.Component.

Cách dễ nhất nếu bạn muốn sử dụng hook và có Reac.component hiện có là tạo một hàm, sau đó gọi React.Component từ hàm đó và truyền tham số.

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;

Lộ trình chuyển đổi của bạn sẽ vẫn giống như

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

sau đó bạn sẽ có thể lấy id từ các đạo cụ trong thành phần phản ứng của bạn

this.props.taskId

Hãy thử một cái gì đó như thế này

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

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

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

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

export default TaskDetail;

Với bộ định tuyến phản ứng 5.1, bạn có thể lấy id bằng cách sau:

<Switch>
  <Route path="/item/:id" component={Portfolio}>
    <TaskDetail />
  </Route>
</Switch>

và thành phần của bạn có thể truy cập id:

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

const TaskDetail = () => {
  const {id} = useParams();
    return (
      <div>
        Yo {id}
      </div>
    );
};