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