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

文件名：【React】react-router-dom路由导航的跳转及传参,t715 【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 />}*/