リアクトルーターダムルートジャンプの実装方法

react-router-dom ルートジャンプの実装方法: 1. 該当するjsファイルを開く; 2. useNavigateメソッドでルートジャンプを手動で操作する; 3. state属性にルート値を渡してuseLocationを利用するメソッドはパラメータを取得します。

このチュートリアルの動作環境: Windows 10 システム、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>
  );
};

属性	説明
replace	ルーティング履歴、いつ値は true、履歴エントリは作成されません
state	ルートは値と params パラメータを渡します

CodeSandBox で

を試してください。 replace プロパティのデフォルト値は false です。ログイン ページの履歴スタックに別のエントリが作成されないように、{replace:true} を使用してください。これは、保護されたページに到達して「戻る」ボタンをクリックしても、ログイン ページには戻らないことを意味します。

state 属性は params パラメータとして渡され、パラメータには表示されません。 URL。その後、ページ更新パラメータは失われます。他のページでは、useLocation メソッドを使用してパラメーターを取得します

推奨される学習: 「react ビデオ チュートリアル 」

以上がリアクトルーターダムルートジャンプの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。