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 ルーターv5.1.0 以降: useHistory フック

機能コンポーネントについては、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: 複数のアプローチ

1. withRouter 上位コンポーネント

コンポーネント プロパティとして履歴オブジェクトを挿入します:

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 中国語 Web サイトの他の関連記事を参照してください。