react-router-dom v6 navigate路由传参

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;

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;