router 之传递state参数

传递state参数

和传search参数一样，无需改动路由表的结构，在路由跳转携带参数的时候，调整传递参数的结构即可

message.jsx

import React,{useState} from 'react'
import {Link, Outlet} from 'react-router-dom'
import './index.css'

export function Message() {
  const [message] = useState([
    {id: '001', title: '消息1', content: '11111'},
    {id: '002', title: '消息2', content: '22222'},
    {id: '003', title: '消息3', content: '33333'},
    {id: '004', title: '消息4', content: '44444'},
  ])
  return (
    <div>
      <ul className='message'>
        {
          message.map((item)=>{
            return (
              <li key={item.id}>
                <Link 
                  to="detail"
                  state={{               // 传递state参数的格式
                    id: item.id,
                    title: item.title,
                    content: item.content
                  }}
                >
                  {item.title}
                </Link>&nbsp;&nbsp;
              </li>
            )
          })
        }
      </ul>
      <div className='messageContent'>
        <Outlet/>
      </div>
    </div>
  )
}

如何接收？

detail.jsx

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

export function Detail() {
  const {state: {id, title, content}} = useLocation()  // 重点是这个hook
  return (
    <div>
      <p>{id}</p>
      <p>{title}</p>
      <p>{content}</p>
    </div>
  )
}