How to implement react-router-dom route jump

react-router-dom Implementation method of route jump: 1. Open the corresponding js file; 2. Manually operate the route jump through the useNavigate method; 3. Pass the route value through the state attribute and use useLocation Method gets parameters.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

react-router-dom How to implement routing jump?

React-Router-dom route jump

useNavigate

The useNavigate method can be manually operated for route jump and can switch between different pages

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	Description
replace	Routing history, when When the value is true, no historical entries are created
state	The route passes the value and the params parameter

Try

on CodeSandBox replace property default value is false, use {replace:true} so that we don't create another entry in the login page history stack. This means that when they reach the protected page and click the "Back" button, they will not be taken back to the login page. The

state attribute is passed in as a params parameter and will not be displayed in the url. Later, the page refresh parameters will be lost. On other pages, we use the useLocation method to obtain parameters

Recommended learning: "react video tutorial"

The above is the detailed content of How to implement react-router-dom route jump. For more information, please follow other related articles on the PHP Chinese website!