ミックスインを使用せずに React Router をプログラムでナビゲートするにはどうすればよいですか?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-19 21:16:09

オリジナル

820 人が閲覧しました

How to Programmatically Navigate in React Router without Mixins?

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