ホームページ >ウェブフロントエンド >jsチュートリアル >ルーティングジャンプを制御するreact-router JSに関するチュートリアルの例を要約します。
この記事では主に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 'react-router' // ... 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 サイトの他の関連記事を参照してください。