react-router JS 控制路由跳轉(zhuǎn)實(shí)例
更新時(shí)間：2017年06月15日 11:43:47 作者：沈斯明
這篇文章主要介紹了react-router JS 控制路由跳轉(zhuǎn)實(shí)例，react實(shí)現(xiàn)路由可以直接使用react-router。有興趣的可以了解一下
Link組件用于正常的用戶點(diǎn)擊跳轉(zhuǎn)，但是有時(shí)還需要表單跳轉(zhuǎn)、點(diǎn)擊按鈕跳轉(zhuǎn)等操作。這些情況怎么跟React Router對(duì)接呢？
下面是一個(gè)表單。
<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)
},
第二種方法是使用context對(duì)象。
export default React.createClass({
// ask for `router` from context
contextTypes: {
router: React.PropTypes.object
},
handleSubmit(event) {
// ...
this.context.router.push(path)
},
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React實(shí)現(xiàn)createElement 和 cloneElement的區(qū)別
本文詳細(xì)介紹了React中React.createElement和React.cloneElement兩種方法的定義、用法、區(qū)別及適用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09
React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產(chǎn)生了react。后來(lái)反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關(guān)于React入門教程之Hello World以及環(huán)境搭建的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
React中memo useCallback useMemo方法作用及使用場(chǎng)景
這篇文章主要為大家介紹了React中三個(gè)hooks方法memo useCallback useMemo的作用及使用場(chǎng)景示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-03-03
這篇文章主要為大家介紹了React優(yōu)雅的封裝SvgIcon組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
React-Native TextInput組件詳解及實(shí)例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
react中的forwardRef 和memo的區(qū)別解析
forwardRef和memo是React中用于性能優(yōu)化和組件復(fù)用的兩個(gè)高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場(chǎng)景,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要為大家介紹了react?fiber執(zhí)行原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
redux是redux官方react綁定庫(kù)，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來(lái)更新數(shù)據(jù)，這篇文章主要介紹了react-redux的設(shè)置,需要的朋友可以參考下2022-09-09
react-redux集中式狀態(tài)管理及基本使用與優(yōu)化
react-redux把組件分為兩類，一類叫做UI組件，一類叫做容器組件，這篇文章主要介紹了集中式狀態(tài)管理＜react-redux＞基本使用與優(yōu)化,需要的朋友可以參考下2022-08-08
關(guān)于React項(xiàng)目中的PDF展示解決方案
這篇文章主要介紹了關(guān)于React項(xiàng)目中的PDF展示解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07