React Router 如何使用history跳轉的實現

Posted on by

在react-router中組件裡面的跳轉可以用<Link>

但是在組件外面改如何跳轉，需要用到react路由的history

replace方法和push方法使用形式一樣，replace的作用是取代當前歷史記錄
go，此方法用來前進或者倒退，history.go(-1);
goBack，此方法用來回退，history.goBack();
goForward，此方法用來前進，history.goForward();

1.hook

import {useHistory} from 'react-router-dom';
function goPage(e) {
 history.push({
 pathname: "/home",
 state: {id: 1}
 });
}

pathname是路由地址，state可以傳參

獲取參數：

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;}
 
}

如果不調用history.go則路由改變瞭，但是頁面不會跳轉。

到此這篇關於React Router 如何使用history跳轉的實現的文章就介紹到這瞭,更多相關React Router history跳轉內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

    None Found