ミックスインを使用せずに React Router をプログラムでナビゲートするにはどうすればよいですか?

Mixins を使用しない 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 はサポートされていません):

パスなしで Route コンポーネントをレンダリングします。これは常に現在の場所と一致し、履歴プロパティも渡します。

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