路由导航跳转方式有：

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 />}
*/