React V6路由跳转,跳转传参(params,search,state)

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

定义路由
<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();
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: React Hooks 路由跳转传参可以使用 React Router 提供的 useHistory 钩子函数。具体步骤如下: 1. 在组件中引入 useHistory 钩子函数: ``` import { useHistory } from 'react-router-dom'; ``` 2. 在组件中调用 useHistory 函数获取 history 对象: ``` const history = useHistory(); ``` 3. 使用 history.push 方法进行路由跳转,并在第二个参数中传入参数对象: ``` history.push('/path', { param1: 'value1', param2: 'value2' }); ``` 4. 在目标组件中使用 useLocation 钩子函数获取传入的参数: ``` import { useLocation } from 'react-router-dom'; const MyComponent = () => { const location = useLocation(); const { param1, param2 } = location.state; // do something with param1 and param2 } ``` 以上就是使用 React Hooks 实现路由跳转传参的方法。 ### 回答2: React Hooks 是 React 16.8 版本新增的新特性。它允许我们在不编写类组件的情况下使用状态和其他 React 特性。使用 React Hooks,我们可以在函数式组件中使用 React 的生命周期方法、state、上下文、ref、useReducer 和 useEffect 等功能。当然,React Hooks 还有一系列相关的 API,比如 useContext、useCallback、useMemo、useRef、useState 等等。 React Hooks 的出现,使得 React 官方推荐的编程风格从类组件转向了函数式组件。React Hooks 的使用可以使得代码更简洁、易读、可维护,并且具有更好的性能和稳定性。React Hooks 的应用非常广泛,如表单处理、组件通信、状态管理、Ajax 请求、动画效果、路由跳转等等。 路由跳转是开发 Web 应用程序非常重要的一部分。在 React 应用中,我们可以使用 React Router 来进行路由跳转功能的实现。React Router 有三种基本路由类型:BrowserRouter、HashRouter 和 MemoryRouter。React Router 提供了很多组件来实现路由跳转。最常见的是 Link 组件和 Route 组件。 在进行路由跳转时,我们可能需要在不同页面之间传递参数。对于类组件来说,我们可以在进行路由跳转的时候,通过 props 进行参数的传递。但对于函数式组件来说,如何进行路由跳转传参呢? React Router 为我们提供了 useHistory、useLocation 和 useParams 等 Hooks 来实现路由跳转传参。其中最常用的是 useHistory 和 useLocation。history 对象代表浏览器的历史记录栈,可以使用 push 方法和 replace 方法进行路由跳转。location 对象代表当前页面的 URL 信息,可以获取 pathname、search 和 hash 信息。 举个例子,在一个 useLocation,然后使用 history.push 方法进行简单的路由跳转传参: ``` import React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; const Article = () => { const history = useHistory(); const location = useLocation(); const handleClick = () => { history.push({ pathname: '/detail', search: `?id=${location.search.slice(4)}`, state: { from: location.pathname }, }); }; return ( <div> <h2>Article</h2> <p>This is an article page.</p> <button onClick={handleClick}>Go to detail page</button> </div> ); }; export default Article; ``` 以上就是使用 React Hooks 实现路由跳转传参的基本思路和示例代码。通过使用 useHistory 和 useLocation Hooks,我们可以轻松实现路由传参功能,在 React 应用中更简洁、易读、可维护,并且具有更好的性能和稳定性。 ### 回答3: React Hooks 是 React 16.8.0 版本推出的特性,它是一组可以让函数组件拥有类组件中状态和生命周期函数等功能的 API。而 React Router 是一个基于 React 的声明式路由库,它让我们可以通过声明式的方式实现路由切换和传参等功能。 在 React Hooks 中,我们可以使用 useHistory 和 useLocation 两个 Hook 来实现路由跳转传参useHistory Hook 可以获取到一个 history 对象,我们可以通过它实现浏览器历史记录的跳转。而 useLocation Hook 则可以获取到当前路由的信息,包括路径和查询参数等。 要实现路由跳转传参,我们可以先定义一个函数组件,然后在组件内部使用 useHistory 和 useLocation Hook: ``` import { useHistory, useLocation } from "react-router-dom"; function MyComponent() { const history = useHistory(); const location = useLocation(); function handleClick() { const myData = { name: "John", age: 30 }; history.push({ pathname: "/otherPage", search: "?myParam=" + JSON.stringify(myData) }); } return ( <button onClick={handleClick}>跳转到其他页面</button> ); } ``` 在 handleClick 函数中,我们创建了一个包含了传递参数的对象 myData,并以字符串的形式序列化。然后,我们使用 history.push 方法跳转到了 "/otherPage" 路径,并将 myData 传递给了 search 属性,这样在路由切换后,我们就可以在其他页面中通过 useLocation Hook 获取到传递的参数了: ``` import { useLocation } from "react-router-dom"; function OtherPage() { const location = useLocation(); const myParam = location.search ? JSON.parse(location.search.split("=")[1]) : null; console.log(myParam); // { name: "John", age: 30 } return ( <div>其他页面</div> ); } ``` 在 OtherPage 组件中,我们使用 useLocation Hook 获取到了当前的路由信息,并通过 JSON.parse 方法将序列化后的字符串反序列化成了对象 myParam。最后,我们可以在控制台中看到 myParam 中的参数值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值