react-router-dom v6版本路由传参【search和state】

search传参：父组件 <Message />

// 路由链接中携带参数，注册时无需接收
<Link to={`/home/message/detail?id=${i.id}&title=${i.title}`}>{i.title}</Link>

search传参：子组件 <Detail />

import { useSearchParams } from 'react-router-dom'
// ！！！使用useSearchParams接收
const [params] = useSearchParams()
console.log('detail组件参数：', params.get("id"))

-------------------------------------------------------------------------------

state传参：父组件 <Message />

{/* 向路由组件传递state参数*/}
<Link to="/home/message/detail/" state={
    {
        id:i.id,
        title:i.title
    }
}>{i.title}</Link>

state传参：子组件 <Detail />

import { useLocation } from 'react-router-dom'
// ！！！使用useLocation接收
const location = useLocation()
const {state:{id,title}} = location