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 = () => {
const location = useLocation()
console.log(location.state)
return (
<div>
<h3>Vue课程</h3>
</div>
);
};
export default VueCourse;