(資料圖片)
本教程操作環境:Windows10系統、react18.0.0版、Dell G3電腦。
react-router-dom路由跳轉怎么實現?
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視頻教程》
以上就是react-router-dom路由跳轉怎么實現的詳細內容,更多請關注php中文網其它相關文章!
關鍵詞: React