溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“react-router-dom路由跳轉如何實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react-router-dom路由跳轉如何實現”文章吧。
react-router-dom路由跳轉的實現方法：1、打開相應的js文件；2、通過useNavigate方法手動操作進行路由跳轉；3、通過state屬性進行路由傳值，并用useLocation方法獲取參數。
React-Router-dom路由跳轉
useNavigate
useNavigate方法可以手動操作進行路由跳轉，可以在不同頁面之間切換
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 方法中傳入要跳轉的 path 路徑
};
return (
<div>
Login
<Button type="primary" onClick={login}>
登錄
</Button>
</div>
);
};
| attribute | 描述 |
|---|---|
| replace | 路由歷史，當值為 true 時，不創建歷史條目 |
| state | 路由傳值，傳params參數 |
在 CodeSandBox 上嘗試
replace屬性默認值為false，使用{replace:true}這樣我們就不會創建登錄頁面歷史堆棧中的另一個條目。這意味著當他們到達受保護的頁面并單擊“上一步”按鈕時不會回到登錄頁面
state屬性進行路由傳值，以params參數的形式傳遞，不會顯示在url后方，頁面刷新參數會丟失。在其他頁面我們是用 useLocation 方法獲取參數。
以上就是關于“react-router-dom路由跳轉如何實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
