클래스 컴포넌트 내부에서 react-router-dom useParams ()

URL 매개 변수 (id)를 가져 와서 구성 요소를 추가로 채우는 반응 라우터-라우트를 기반으로 세부 정보보기를로드하려고합니다.

내 경로는 다음과 같이 /task/:idURL에서 : 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.

이 문서는 클래스 기반이 아닌 기능적 구성 요소를 기반으로 한 예제 만 보여줍니다.

도와 주셔서 감사합니다. 새로운 반응입니다.

withRouter이것을 달성 하기 위해 사용할 수 있습니다 . 내 보낸 클래스 구성 요소를 내부에 래핑하면를 withRouter사용 this.props.match.params.id하는 대신 매개 변수를 얻을 수 있습니다 useParams(). 또한 어떤 얻을 수있다 location, match또는 history사용하여 정보를 withRouter. 그들은 모두 아래에 전달됩니다this.props

예제를 사용하면 다음과 같습니다.

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

그렇게 간단합니다!

매개 변수는 일치 오브젝트의 소품을 통해 전달됩니다.

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

후크는 클래스 기반 구성 요소와 작동하지 않으므로 함수로 래핑하고 속성을 전달할 수 있습니다.

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

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

그러나 @ michael-mayo가 말했듯이 이것이 withRouter이미 수행중인 것으로 기대합니다 .

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>

그런 다음 반응 구성 요소의 소품에서 ID를 가져올 수 있습니다.

this.props.taskId

이런 식으로 해보십시오

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;

반응 라우터 5.1을 사용하면 다음과 같이 ID를 얻을 수 있습니다.

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

ID에 액세스 할 수있는 것보다

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

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