React Router v4, v5 및 v6에서 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?

React Router를 사용하여 프로그래밍 방식으로 탐색

React Router에서 Link 요소는 하이퍼링크를 사용한 기본 탐색을 활성화합니다. 그러나 링크 이상의 프로그래밍 방식 탐색의 경우 다음 방법을 활용할 수 있습니다.

React Router v6.6.1 이상: useNavigate Hook

다음과 같이 useNavigate 후크를 활용하세요.

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

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React Router v5.1.0 이상: useHistory Hook

기능적 구성 요소의 경우 useHistory 후크를 고려하세요.

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React Router v4: Multiple Approaches

1. Router Higher-Order 사용 Component

히스토리 객체를 컴포넌트 prop으로 삽입:

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

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

2. 구성 및 렌더링된 경로

현재 위치와 항상 일치하는 경로 없는 경로를 렌더링하고 기록을 통한 기록 방법을 제공합니다. prop:

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

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

3. Context

React Context API를 통한 액세스 기록:

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

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

단순화를 위해, withRouter 고차 컴포넌트를 사용하거나 경로 없는 경로를 구성으로 렌더링하는 것이 좋습니다.

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