注意:以下代码为个人笔记,不全,需自行调整,方可使用
定义路由
<Route path='/paramsPage/:testId/:testTitle' element={<ParamsPage />}></Route>
<Route path='/SearchPage' element={<SearchPage />}></Route>
公共跳转方法
import { useNavigate,Link } from 'react-router-dom';
//跳转页面
const navigate = useNavigate();
const toPage = (path)=>{
navigate(`${path}?id=` + 123);
}
const toPage2 = (path)=>{
//既有search传参也有state传参 目标页面可见 link跳转也是一样 增加一个state的属性
navigate(path,{state:{testId,testTitle}});
}
const testId = 4455
const testTitle = 'link跳转页面并传参'
<button onClick={() => toPage('/testShow')}>navigate跳转页面并query传参</button>
{/* link跳转 */}
<button>
<Link to={`/searchPage?testId=${testId}&&testTitle=${testTitle}`}>
link跳转页面并search传参</Link>
</button>
{/* 函数跳转 */}
<button onClick={()=>toPage2(`/searchPage?testId=${testId}&&testTitle=${testTitle}`)}>link跳转页面并search传参</button>
//目标页面接受传参
import { Link, useNavigate,useLocation } from 'react-router-dom'
const location = useLocation();
console.log('夫斯基大街',location.state)
const searchParams = new URLSearchParams(location.search);
const testId = searchParams.get('testId');
const testTitle = searchParams.get('testTitle');
{/* link跳转 */}
<button>
<Link to={`/paramsPage/${testId}/${testTitle}`}>
link跳转页面并params传参</Link>
</button>
{/* 函数跳转 */}
<button onClick={()=>toPage2(`/paramsPage/${testId}/${testTitle}`)}>link跳转页面并params传参</button>
//目标页面接受传参
// 接收params参数 link方式params接收参数
import { Link, useNavigate,useParams } from 'react-router-dom'
const { testId, testTitle } = useParams();