八、【React-Router6】路由传参 之 state

项目修改自 上一节 的 Demo

1、Message.jsx

• to 正常写
• 6 直接给 <Link> 加了一个 state 属性，直接给它传就可以了

<Link to='detail' state={m}>{m.title}</Link>

2、Detail.jsx

• 使从新Hook useLocation 中获取 state 参数

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

export default function Detail() {

    // 直接连续结构获取 location 中的 state 的属性
    const { state: { id, title, info } } = useLocation()

    return (
        <ul>
            <li>id：{id}</li>
            <li>标题：{title}</li>
            <li>内容：{info}</li>
        </ul>
    )
}

3、Result