router6 之传递search参数

传递params参数

无需修改路由表的结构，修改跳转路由携带参数的结构需要调整

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?id=${item.id}&title=${item.title}&content=${item.content}`}> // 传递search参数
                  {item.title}
                </Link>&nbsp;&nbsp;
              </li>
            )
          })
        }
      </ul>
      <div className='messageContent'>
        <Outlet/>
      </div>
    </div>
  )
}

如何接收

detail.jsx

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

export function Detail() {
  const [search, setSearch] = useSearchParams()  //这个hook是重点
  const id = search.get('id')  // 取值只能这样取，文档规定的
  const title = search.get('title')
  const content = search.get('content')
  return (
    <div>
      <p>{id}</p>
      <p>{title}</p>
      <p>{content}</p>
      <button onClick={()=>setSearch('id=008&title=解决&content=999')}>点我更新一下收到的search参数</button>
    </div>
  )
}

setSearch：更新路由参数，url地址会发生改变