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>) }

總結

以上是生活随笔為你收集整理的react-router v6替换history.goBack()和goForward()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。