react router v6 navigate路由传参
1、Home.jsx组件传递数据
import React from 'react'; import {useNavigate} from "react-router-dom"; const Home = () => { const navigate = useNavigate() return ( <div className={'Home'}> <h2>Home</h2> {/*传递数据*/} <button onClick={()=> navigate('/about/vue',{state:{id:'001',name:'张三'}})} > 去about </button> </div> ); }; export default Home;
2、VueCourse.jsx组件接收数据
import React, {useEffect} from 'react'; import {useLocation} from "react-router-dom"; const VueCourse = () => { /** * 路由信息在location * */ const location = useLocation() //location.state为路由传递过来的数据 console.log(location.state) return ( <div> <h3>Vue课程</h3> </div> ); }; export default VueCourse;