믹스인 없이 React Router에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?

믹스인이 없는 React Router의 프로그래밍 방식 탐색

React Router는 컨텍스트를 통한 원활한 탐색을 가능하게 하지만 사용법을 이해하는 것은 혼란스러울 수 있습니다. 믹스인을 사용하지 않고 프로그래밍 방식으로 탐색하는 방법을 살펴보겠습니다.

React Router는 컨텍스트를 통해 기록 객체를 제공하여 조작을 위한 푸시 및 교체 방법에 대한 액세스를 제공합니다. 그러나 React가 발전함에 따라 프로그래밍 방식 탐색을 위한 다양한 옵션이 제공됩니다:

1. withRouter HOC 활용(React Router 6은 지원되지 않음):

withRouter HOC는 히스토리 객체를 구성 요소 props에 주입하여 탐색 방법에 직접 액세스할 수 있도록 합니다.

import { withRouter } from 'react-router-dom';

const Button = withRouter(({ history }) => {
  const handleClick = () => { history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
});

2. 경로 없는 경로 렌더링(React Router 6은 지원되지 않음):

경로 없이 경로 구성 요소를 렌더링합니다. 경로는 항상 현재 위치와 일치하고 기록 prop도 전달합니다.

import { Route } from 'react-router-dom';

const Button = () => {
  return (
    <Route render={({ history }) => {
      const handleClick = () => { history.push('/new-location'); };
      return <button onClick={handleClick}>Click Me!</button>;
    }} />
  );
};

3. 컨텍스트 사용(복잡하고 더 이상 사용되지 않음):

이 접근 방식은 React의 컨텍스트에 대한 깊은 이해가 필요하므로 주의해서 사용해야 합니다. 기록 속성에 액세스하려면 구성 요소 컨텍스트 유형을 정의해야 합니다.

import React from 'react';

const Button = (props, context) => {
  const handleClick = () => { context.history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
};

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
};

대부분의 시나리오에서 옵션 1과 2는 단순성을 제공하므로 권장됩니다.

위 내용은 믹스인 없이 React Router에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!