React V6路由跳转，跳转传参（params，search，state）-Toy模板网

这篇具有很好参考价值的文章主要介绍了React V6路由跳转，跳转传参（params，search，state）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

注意：以下代码为个人笔记，不全，需自行调整，方可使用

定义路由
<Route path='/paramsPage/:testId/:testTitle' element={<ParamsPage />}></Route>
<Route path='/SearchPage' element={<SearchPage />}></Route>

公共跳转方法文章来源地址https://www.toymoban.com/news/detail-507387.html

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();