react-router-dom路由跳轉(zhuǎn)如何實(shí)現(xiàn)

這篇“react-router-dom路由跳轉(zhuǎn)如何實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react-router-dom路由跳轉(zhuǎn)如何實(shí)現(xiàn)”文章吧。

react-router-dom路由跳轉(zhuǎn)的實(shí)現(xiàn)方法：1、打開相應(yīng)的js文件；2、通過useNavigate方法手動(dòng)操作進(jìn)行路由跳轉(zhuǎn)；3、通過state屬性進(jìn)行路由傳值，并用useLocation方法獲取參數(shù)。

React-Router-dom路由跳轉(zhuǎn)

useNavigate

useNavigate方法可以手動(dòng)操作進(jìn)行路由跳轉(zhuǎn)，可以在不同頁面之間切換

import { FunctionComponent } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "antd";
export const Login: FunctionComponent = () => {
  const navigate = useNavigate();
  const login = () => {
    navigate("/"); // 向 navigate 方法中傳入要跳轉(zhuǎn)的 path 路徑
  };
  return (
    <div>
      Login
      <Button type="primary" onClick={login}>
        登錄
      </Button>
    </div>
  );
};

在 CodeSandBox 上嘗試

replace屬性默認(rèn)值為false，使用{replace:true}這樣我們就不會(huì)創(chuàng)建登錄頁面歷史堆棧中的另一個(gè)條目。這意味著當(dāng)他們到達(dá)受保護(hù)的頁面并單擊“上一步”按鈕時(shí)不會(huì)回到登錄頁面

state屬性進(jìn)行路由傳值，以params參數(shù)的形式傳遞，不會(huì)顯示在url后方，頁面刷新參數(shù)會(huì)丟失。在其他頁面我們是用 useLocation 方法獲取參數(shù)。

以上就是關(guān)于“react-router-dom路由跳轉(zhuǎn)如何實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。