React Router 如何使用history跳轉(zhuǎn)的實(shí)現(xiàn)
在react-router中組件里面的跳轉(zhuǎn)可以用<Link>
但是在組件外面改如何跳轉(zhuǎn)，需要用到react路由的history
replace方法和push方法使用形式一樣，replace的作用是取代當(dāng)前歷史記錄
go，此方法用來(lái)前進(jìn)或者倒退，history.go(-1);
goBack，此方法用來(lái)回退，history.goBack();
goForward，此方法用來(lái)前進(jìn)，history.goForward();
1.hook
import {useHistory} from 'react-router-dom';
function goPage(e) {
history.push({
pathname: "/home",
state: {id: 1}
});
}
pathname是路由地址，state可以傳參
獲取參數(shù)：
import {useLocation} from 'react-router-dom';
function getParams(){
let location = useLocation();
let id = location.state.id;
}
2.class組件
import React from 'react';
import {createBrowserHistory} from "history";
class App extends React.Component{
constructor(props) {
super(props);
}
goPage() {
let history = createBrowserHistory()
history.push({
pathname: "/home",
state: {id: 1}
});
history.go();
}
render() {return null;}
}
如果不調(diào)用history.go則路由改變了，但是頁(yè)面不會(huì)跳轉(zhuǎn)。
到此這篇關(guān)于React Router 如何使用history跳轉(zhuǎn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React Router history跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解開(kāi)發(fā)react應(yīng)用最好用的腳手架 create-react-app
本篇文章主要介紹了詳解開(kāi)發(fā)react應(yīng)用最好用的腳手架 create-react-app，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟
這篇文章主要介紹了使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟，主要包括后端：Rails API部分，前端：React部分及React組件的相關(guān)操作，具有內(nèi)容詳情跟隨小編一起看看吧2021-08-08
React Hooks常用場(chǎng)景的使用(小結(jié))
這篇文章主要介紹了React Hooks常用場(chǎng)景的使用，根據(jù)使用場(chǎng)景分別進(jìn)行舉例說(shuō)明，幫助你認(rèn)識(shí)理解并可以熟練運(yùn)用 React Hooks 大部分特性，感興趣的可以了解一下2021-04-04
React Hooks中模擬Vue生命周期函數(shù)的指南
React Hooks 提供了一種在函數(shù)組件中使用狀態(tài)和其他 React 特性的方式,而不需要編寫類組件,Vue 的生命周期函數(shù)和 React Hooks 之間有一定的對(duì)應(yīng)關(guān)系,本文給大家介紹了React Hooks中模擬Vue生命周期函數(shù)的指南,需要的朋友可以參考下2024-10-10
React如何通過(guò)@craco/craco代理接口
這篇文章主要介紹了React如何通過(guò)@craco/craco代理接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了淺談react性能優(yōu)化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了React函數(shù)式組件和類式組件詳情，React是組件化的的JS庫(kù)，組件化也是React的核心思想，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理
這篇文章主要為大家介紹了react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
React State狀態(tài)與生命周期的實(shí)現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
這篇文章主要介紹了在?React?中使用?i18next,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01