react v6路由传参

// 声明式导航
<Link to={`home/${id}/${name}`}>
// 编程式导航
navigate(`page/${id}/${name}`);
...
// 需要在路由里声明传参的key值
<Route path="home/:id/:name" element={Home}></Route>

// 组件接收参数
import {useParams} from 'react-router-dom';

function Home(){
    const {id, name} = useParams();
}

// 声明式导航
<Link to={`home?id=${id}&&name=${name}`}>
// 编程式导航
navigate(`home?id=${id}&&name=${name}`);

// 组件接收参数
import { useSearchParams } from 'react-router-dom';

function Home(){
    const [searchParams] = useSearchParams();
    const id = searchParams.get("id");
    const name = searchParams.get("name");
}

// 声明式导航
<Link to='home' state={{id:1,name:'aa'}}>
// 编程式导航
navigate('home',{state:{id:1,name:'aa'}});

import {useLocation} from 'react-router-dom';

function Home(){
    const {id,name} = useLocation().state;
}