路由导航跳转方式有:
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 />
}
*/