Three ways to pass parameters in react-router V6

Routing jump usenavigate()

programmatic navigation

• import auseNavigate钩子函数
• Execute useNavigatethe function to get the jump function
• Execute the jump function in the event to complete the routing jump

import {
    
     useNavigate  } from "react-router-dom";
// 直接在函数式组件中调用 传入路由path直接开始跳转
navigate("/page1");

Scenario : While jumping to the route, sometimes it is necessary to pass parameters

Since v6 removed the three parameters ( Location, history, match ) that the routing component in the old version could receive , this.props.location.pathname gets the current route. And withRouter is also removed .不能直接使用

So how to pass parameters? Please read below:

Routing parameters

1, searchParams parameters

The method of parameter passing in search is relatively simple, and the form of the parameter is spliced ​​after the address with a question mark

pass parameters

import {
    
     useNavigate  } from "react-router-dom";

const Login: React.FC = (props: any) => {
    
    
   // 提交按钮
  const onFinish = () => {
    
    
    // 1,search传参
    navigate("/page1?name=Eula&age=18");
  };
}

taking

import {
    
     useSearchParams } from "react-router-dom";

const Login: React.FC = (props: any) => {
    
    
  const onFinish = () => {
    
    
     // 问号传参的获取方式
	let [searchParams, setSearchParams] = useSearchParams()
	console.log(searchParams.get('name')) //  "Eula"
	console.log(searchParams.get('age')) //  18
  };
}

2, params pass parameters

The params method requires more parameters, and we need to 路由表配置add a parameter placeholder in the position.

Add parameter placeholders to the location of the routing table configuration

 {
    
    
    path: "/",
    element: withLoadingComponents(<Home />), 
    children: [
      {
    
    
        path: "/page1/:name/:age",//注意这里 可以占位多个
        element: withLoadingComponents(<Page1 />)
      },
    ]
  },

pass parameters

import {
    
     useNavigate  } from "react-router-dom";

const Login: React.FC = (props: any) => {
    
    
   // 提交按钮
  const onFinish = () => {
    
    
     // params 传参
    navigate("/page1/Eula/18");
  };
}

taking

import {
    
     useParams } from "react-router-dom";

const Login: React.FC = (props: any) => {
    
    
  const onFinish = () => {
    
    
  // 使用useParams 函数
  const params = useParams()
  console.log("params:",params);// 打印 {   "name": "Eula",    "age": "18"}
  };
}

3. State parameter passing

When using state to pass parameters, the parameters need to be placed in the state object;

Note: At this time, there should be no parameter space for params when passing parameters on the route, otherwise it will not be able to jump;

pass parameters

import {
    
     useNavigate  } from "react-router-dom";

const Login: React.FC = (props: any) => {
    
    
   // 提交按钮
  const onFinish = () => {
    
    
     // state 传参 
     navigate("/page1",{
    
     state: {
    
    name:'Eula',age:"18"}});
  };
}

taking

import {
    
     useLocation } from "react-router-dom";

const Login: React.FC = (props: any) => {
    
    
  const onFinish = () => {
    
    
  // 获取navigate中传递的state中的信息
  let location = useLocation(); 
  console.log("params:",location);
  };
}

It prints as follows:

Summarize

Parameter passing method	use	taking
searchParams parameter passing	navigate(“/page1?name=Eula&age=18”);	useSearchParams（）
params pass parameter	navigate(“/page1/Eula/18”); It is necessary to add placeholders to the routing table: path: “/page1/:name/:age”,	useParams（）
state parameter	navigate(“/page1”,{ state: {name:‘Eula’,age:“18”}});	useLocation（）