【React】react-router-dom路由导航的跳转及传参

路由导航跳转方式有：

1、声明式导航：解析成a标签跳转

// 引入
import {
    Link } from "react-router-dom";

//使用
const Home=()=>{
   
	return (
		<div>
			<Link to="login">去登录</Link>
		</div>
	)
}
export default Home;

2、编程式导航：通过调用方法跳转

// 引入
import {
    useNavigate } from "react-router-dom";

const Home=()=>{
   
	//使用
	const navigate=useNavigate();
	return (
		<div>
			<div onClick={
   ()=>navigate("login")}>去登录</div>
		</div>
	)
}
export default Home;

路由导航传参方式有：

1、searchParams

//引入
import {
    useNavigate ,useSearchParams} from "react-router-dom";

const navigate=useNavigate();
const [params]=useSearchParams();

//跳转传参
<button onClick={
   ()=>navigate(`/detail?id=10`)}>进详情</button>

//取参
console.log(params.get("id"))

2、params

//引入
import {
    useNavigate ,useParams} from "react-router-dom";

const navigate=useNavigate();
const params=useParams();

//跳转传参
<button onClick={
   ()=>navigate("/detail/10")}>进详情</button>

//取参
console.log(params.id)

/*
	注：这种方式需要修改router路由配置
	{
		path:"/detail/:id",
		element:<Detail />
	}
*/