React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します

1. withRouterコンポーネントを使用する

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

'react' から React をインポートします
'react-router-dom' から { withRouter } をインポートします。
'antd' から { Button } をインポートします

エクスポートconst ButtonWithRouter = withRouter(({ history }) => {
  console.log('履歴', 履歴)
  戻る （
    <ボタン
      タイプ='デフォルト'
      onClick={() => { history.push('/new-location') }}
    >
      クリックしてください！
    </ボタン>

  ）
})

画像.jpg

import { ButtonWithRouter } from './buttonWithRouter'

または：

const ButtonWithRouter = (props) => {
  コンソールログ('props', props)
  戻る （
    <ボタン
      タイプ='デフォルト'
      onClick={() => { props.history.location.push('/new-location') }}
    >
      クリックしてください！
    </ボタン>

  ）
}

デフォルトのエクスポート withRouter(ButtonWithRouter)

画像.jpg

インポート: import ButtonWithRouter from './buttonWithRouter'

2. ルートタグを使用する

ルート入口

画像.jpg

ルートコンポーネントは、場所の一致にのみ使用されるわけではありません。パスなしでルートをレンダリングすることができ、ルートは常に現在の場所と一致します。 Route コンポーネントは withRouter と同じプロパティを渡すため、履歴プロパティを通じて履歴メソッドにアクセスできます。

それで：

エクスポートconst ButtonWithRouter = () => (
  <ルートレンダリング={({ history }) => {
    console.log('履歴', 履歴)
    戻る （
      <ボタン
        タイプ='ボタン'
        onClick={() => { history.push('/new-location') }}
      >
        クリックしてください！
      </ボタン>
    ）
  }} />
）

画像.jpg

React Router 5.1.0はuseHistoryを使用します

React Router v5.1.0からuseHistoryフックが追加されました。React >16.8.0を使用している場合は、useHistoryを使用してページジャンプを実現できます。

エクスポートconst ButtonWithRouter = () => {
  定数履歴 = useHistory();
  console.log('履歴', 履歴)
  戻る （
    <ボタン
      タイプ='ボタン'
      onClick={() => { history.push('/new-location') }}
    >
      クリックしてください！
    </ボタン>
  ）
}

画像.jpg

React Router 5.1.0 の useHistory を使用したページジャンプナビゲーションの実装に関するこの記事はこれで終わりです。ReactRouter useHistory ページジャンプナビゲーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: