ホームページ  >  記事  >  ウェブフロントエンド  >  ルーティングジャンプを制御するreact-router JSに関するチュートリアルの例を要約します。

ルーティングジャンプを制御するreact-router JSに関するチュートリアルの例を要約します。

零下一度
零下一度オリジナル
2018-05-15 11:31:422495ブラウズ

この記事では主にreact-router JSコントロールのroutingjumpインスタンスを紹介します。Reactはreact-routerを直接使用してルーティングを実装できます。興味のある方は、

Link コンポーネントについて学ぶことができます。これは、通常のユーザーのクリックによるジャンプに使用されますが、場合によっては、フォーム ジャンプや ボタン ジャンプのクリックなどの操作も必要になります。このような状況を React Router に接続するにはどうすればよいでしょうか?
以下はフォームです。

<form onSubmit={this.handleSubmit}>
 <input type="text" placeholder="userName"/>
 <input type="text" placeholder="repo"/>
 <button type="submit">Go</button>
</form>

最初の方法は、browserHistory.pushを使用することです

import { browserHistory } from &#39;react-router&#39;

// ...
 handleSubmit(event) {
  event.preventDefault()
  const userName = event.target.elements[0].value
  const repo = event.target.elements[1].value
  const path = `/repos/${userName}/${repo}`
  browserHistory.push(path)
 },

2番目の方法は、contextobjectを使用することです。

りー

以上がルーティングジャンプを制御するreact-router JSに関するチュートリアルの例を要約します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。