react-router V6 push和replace使用

最新推荐文章于 2025-03-02 23:18:41 发布

weixin_46077728

最新推荐文章于 2025-03-02 23:18:41 发布

阅读量4.1k

点赞数 5

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46077728/article/details/122703248

版权

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

#userNavigate只能在函数式组件中使用
export default function Messages() {
    const messageArr=[
        {id:'1',title:'消息1'},
        {id:'2',title:'消息2'},
        {id:'3',title:'消息3'},
    ]
    const navigate = useNavigate()
	
	#带历史记录的跳转
    const pushShow =(id,title)=>{
        navigate(`/home/messages/detail/${id}/${title}`)
    }
    #不带历史记录的跳转
    const replaceShow=(id,title)=>{
        navigate(`/home/messages/detail/${id}/${title}`,{replace:true})
    }
    return (
        <div>

            <ul>
            {
                messageArr.map((messageObj)=>{
                    return <li key={messageObj.id}>
                        {/* 向路由链接传递params参数 */}
                        <Link to={`/home/messages/detail/${messageObj.id}/${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 />
            <div>
                <Routes>
                    <Route path="/detail/:id/:title" element={<Detail/>}>
                    </Route>
                </Routes>
            </div>
        </div>
        
    )
}