react-router v6替换history.goBack()和goForward()

import React from 'react'
import { Link,Routes,Route ,useNavigate} from 'react-router-dom'
import Detail from './Detail'


export default function Messages() {
    const messageArr=[
        {id:'1',title:'消息1'},
        {id:'2',title:'消息2'},
        {id:'3',title:'消息3'},
    ]
    const navigate = useNavigate()
    // 接收params参数
    // const pushShow =(id,title)=>{
    //     navigate(`/home/messages/detail/${id}/${title}`)
    // }
    // const replaceShow=(id,title)=>{
    //     navigate(`/home/messages/detail/${id}/${title}`,{replace:true})
    // }
    // 接收search参数
    const pushShow =(id,title)=>{
        navigate(`/home/messages/detail`,{state:{id:id,title:title}})
    }
    const replaceShow=(id,title)=>{
        navigate(`/home/messages/detail`,{replace:true,state:{id:id,title:title}})
    }
    return (
        <div>

            <ul>
            {
                messageArr.map((messageObj)=>{
                    return <li key={messageObj.id}>
                        
                        {/* 向路由链接传递params参数 */}
                        {/* <Link to={`/home/messages/detail/${messageObj.id}/${messageObj.title}`}>{messageObj.title}</Link> */}
                        {/* 向路由链接传递search参数 */}
                        {/* <Link to={`/home/messages/detail/?id=${messageObj.id}&title=${messageObj.title}`}>{messageObj.title}</Link> */}
                        {/* 向路由链接传递state参数 */}
                        
                        <Link to={`/home/messages/detail`} state={{id:messageObj.id,title:messageObj.title}}>{messageObj.title}</Link>
                        <button onClick={()=>pushShow(messageObj.id,messageObj.title)}>push查看</button>
                        <button onClick={()=>replaceShow(messageObj.id,messageObj.title)}>replace查看</button>
                    </li>
                })
            }
            </ul>
            <hr />
            <button onClick={() => navigate(-2)}>Go 2 pages back</button>
      		<button onClick={() => navigate(-1)}>Go back</button>
      		<button onClick={() => navigate(1)}>Go forward</button>
      		<button onClick={() => navigate(2)}>Go 2 pages forward</button>
            <div>
                <Routes>
                    {/* params参数 */}
                    {/* <Route path="/detail/:id/:title" element={<Detail/>}>
                    </Route> */}
                    {/* search参数 */}
                    <Route path="/detail" element={<Detail/>}>
                    </Route>
                </Routes>
            </div>
        </div>
        
    )
}