履歴を使用して React-router でルーティングを制御する方法 (詳細なチュートリアル)

この記事では、react-router v4 がルーティング ジャンプを制御するためにどのように履歴を使用するかに関する関連情報を、サンプル コードを通じて詳しく紹介します。これは、あらゆる人の学習や仕事に必要です。ぜひフォローして一緒に学んでください。

はじめに

React Router v4 が正式にリリースされてから長い時間が経ちましたが、今週、以前のルーティングはバージョン v2.7.0 を使用していたので、ルーティングをアップグレードすることにしました。さて、次は「何か新しいことを試す」時です...

公式がバージョン 2.x と 4.x の両方を同時にメンテナンスしているという噂が世間に流れています。 (ヾ(｡ꏿ﹏ꏿ)ﾉﾞねえ、この時点で、私と同じくらい賢いあなたも気づくと思いますが、ReactRouter v3 はどこに行ったのでしょうか?すべて失ったでしょうか??Bala は問題を解決しました???完璧な説明をしていただけませんか?) 実際、バージョン 3.x にはバージョン 2.x と比べて新しい機能は導入されておらず、バージョン 2.x のいくつかの廃止された API の警告が削除されているだけです。計画によれば、歴史的な問題のない新しいプロジェクトが ReactRouter の安定版を使用したい場合は、ReactRouter 3.x を使用する必要があります。 3.x バージョンは現在まだベータ段階ですが、4.x バージョンよりも前に正式にリリースされる予定です。すでにバージョン 2.x を使用している場合は、3.x にアップグレードしても追加のコード変更は必要ありません。

問題

react-router v3を使用するとき、パスをジャンプしたいのですが、通常は次のように処理します

• react-routerからbrowserHistoryをエクスポートします。

• ルーティングジャンプの操作にはbrowserHistory.push()やその他のメソッドを使用します。

以下と同様です

import browserHistory from 'react-router';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
 .then(response => {
 browserHistory.push('/cart'); //这里
 });
}

が、ここで問題が発生します。react-router v4では、browserHistoryなどのエクスポートが提供されていません~~

どうすればよいでしょうか?配線ジャンプを制御するにはどうすればよいですか? ? ?

解決策

1. withRouter

withRouterの高レベルコンポーネントを使用します。これは、使用するための履歴を提供します~

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

class MyComponent extends React.Component {
 ...
 myFunction() {
 this.props.history.push("/some/Path");
 }
 ...
}
export default withRouter(MyComponent);

これは公式に推奨されている方法です。しかし、この方法は少し使いにくいです。たとえば、redux でルーティングを使用したい場合、コンポーネント内で履歴を渡すことしかできません。 。

質問の章のコードと同じように、コンポーネントから履歴パラメータを渡す必要があります。 。 。

2. Context の使用

react-router v4 は Router コンポーネントの Contex を通じてルーター オブジェクトを公開します~

サブコンポーネントの Context を使用すると、以下の例のようにルーター オブジェクトを取得できます~

import React from "react";
import PropTypes from "prop-types";
class MyComponent extends React.Component {
 static contextTypes = {
 router: PropTypes.object
 }
 constructor(props, context) {
 super(props, context);
 }
 ...
 myFunction() {
 this.context.router.history.push("/some/Path");
 }
 ...
}

もちろん、この方法は慎重に使用し、使用しないようにしてください。なぜなら、react はコンテキストの使用を推奨していないからです。将来のバージョンでは廃止される可能性があります。

3. ハック

実際、問題は、v3 で Router コンポーネントに渡した履歴が再び公開され、~~

コンポーネントの BrowserRouter が独自に作成されたことです。そしてそれは公開されず、引用することも許可されていません。恥ずかしい〜

推奨のBrowserRouterが使えず、Routerコンポーネントを使用したままです。私たちは歴史を自分たちで作り、他の場所では私たちが作った歴史と呼ばれます。コードを見てください~

履歴を作成します

// src/history.js
import createHistory from 'history/createBrowserHistory';
export default createHistory();

Routerコンポーネントを使用します

// src/index.js
import { Router, Link, Route } from 'react-router-dom';
import history from './history';
ReactDOM.render(
 <Provider store={store}>
 <Router history={history}>
  ...
 </Router>
 </Provider>,
 document.getElementById(&#39;root&#39;),
);

他の場所でもこのように使用できます

import history from './history';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
  .then(response => {
  history.push('/cart'); //这里
  });
}

4 BrowserRouterを使用する必要があります

確かに、react-router v4は3 番目のソリューションでは、このコンポーネントを放棄し、Router コンポーネントの使用に戻りました。

どうしよう。 BrowserRouter のソースコードを見てみると突然わかると思います。

ソースコードは非常にシンプルで、大したことはありません。 BrowserRouter コンポーネントをすべて自分で作成し、3 番目のソリューションの Router コンポーネントを置き換えます。おいおい。

これで終わりです。私は現在 3 番目の方法を使用しています。公式には 1 番目の方法が推奨されていますが、使用するのはより面倒だと思います。 ~

上記はあなたのためにまとめたものです。将来役立つことを願っています。

関連記事:

js での MVVM フレームワークの実装 (詳細なチュートリアル)

requireJS でモジュールローダーを実装するには?

タオバオのような JSsearch 検索 (詳細なチュートリアル)

jquery の on と click の違いは何ですか?

Angular 2+のスタイルバインディングのメソッドとは何ですか

以上が履歴を使用して React-router でルーティングを制御する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。