React V6路由跳转，跳转传参（params，search，state）

最新推荐文章于 2024-12-03 11:12:15 发布

原创最新推荐文章于 2024-12-03 11:12:15 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React 专栏收录该内容

9 篇文章

订阅专栏

本文展示了如何在React应用中使用`react-router-dom`库进行页面导航和参数传递。通过`useNavigate`函数及`Link`组件实现query和params方式的传参，并在目标页面接收和解析这些参数。

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

定义路由
<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();