React-router-dom v6 实现跳转和传值

通过state接受参数

A页面准备跳转
import {useNavigate} from 'react-router-dom';
let navigate=useNavigate();

function goDetail1(){
    navigate('/userdetail1', { state: { id1: '123456' ,name1:"jialin"} });
}

userdetail1页面对应页面接受参数
import {useNavigate,useLocation} from 'react-router-dom';
    let location = useLocation();
    //使用location.state传值
	let { id1 ,name1} = location.state;
	console.log(location)
	console.log(id1)
	console.log(name1)

通过useSearchParams接受参数

A页面跳转发送参数
import {useNavigate} from 'react-router-dom';
let navigate=useNavigate();
function goDetail2(){
    navigate(`/userdetail2?id2=654321&name2=jialin`)
}

userdetail2页面对应页面接受参数
import {useNavigate, useSearchParams} from 'react-router-dom';
let [search]= useSearchParams()
console.log(search)
const id2 = search.get('id2')
const name2 = search.get('name2')
console.log(id2)
console.log(name2)