react-router-dom路由跳轉怎麼實現

react-router-dom路由跳轉的實作方法：1、開啟對應的js檔案；2、透過useNavigate方法手動操作進行路由跳轉；3、透過state屬性進行路由傳值，並以useLocation方法獲取參數。

本教學操作環境：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中文網其他相關文章！